-
Notifications
You must be signed in to change notification settings - Fork 286
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added support for KML IconStyle scale and BalloonStyle text #197
base: master
Are you sure you want to change the base?
Conversation
Popups on Placemarks now behave like GoogleEarth - work only when BalloonStyle/displayMode is not 'hide', to show: <b>name</b><br/>description if Placemark/description is provided. Otherwise the content of BaloonStyle/text is used. c.f. https://developers.google.com/kml/documentation/kmlreference#balloonstyle
@tatsubori thx for the patch, i got a doubt on handling scale property since this one is used "kind of magically" on google earth/maps side. I was going to implement this in #159 but it seems google tools presuppose that default icon size is 64 and default scale is 0.5... Anyway, if you want to handle scale, you have to apply its ration on anchorRef too, in order to position icons correctly. Here is a kml file that show different result before/after your patch cause it use hotSpot tag for IconStyle http://labo.eliaz.fr/IMG/kml/autour_de_pleumeur.kml Any thoughts about it ? |
@brunob Hmm. To "scale" anchorRef properly, we need to know the original icon size. Do you have any idea on how to get it? It would also solve an issue with the current hack assuming the original icon should have 1:1 proportion in width and height. |
In fact it's one the problems that made me think that scale would be hard to handle (+ the fact that google tools generate kml's that contain weird size/scale ratio).
Not for now, and KML is a so terrible mess that i don't really want to work on it every day ^^ I've spent a lot of time on last kml script refactoring... |
The original icon size can be obtained and scaled according to scale property as follows: @@
parseStyle: function (xml) {
var style = {}, poptions = {}, ioptions = {}, el, id;
- var attributes = {color: true, width: true, Icon: true, href: true, hotSpot: true};
+ var attributes = {color: true, width: true, Icon: true, href: true, hotSpot: true, scale: true};
function _parse (xml) {
var options = {};
@@
} else if (key === 'Icon') {
ioptions = _parse(e);
if (ioptions.href) { options.href = ioptions.href; }
+ if (ioptions.scale) { options.scale = parseFloat(ioptions.scale); }
} else if (key === 'href') {
options.href = value;
+ } else if (key === 'scale') {
+ options.scale = parseFloat(value);
}
}
}
@@
if (el && el[0]) { ioptions = _parse(el[0]); }
if (ioptions.href) {
style.icon = new L.KMLIcon({
iconUrl: ioptions.href,
+ iconScale: ioptions.scale ? ioptions.scale : 1.0,
shadowUrl: null,
anchorRef: {x: ioptions.x, y: ioptions.y},
anchorType: {x: ioptions.xunits, y: ioptions.yunits}
});
@@
L.KMLIcon = L.Icon.extend({
+ createIcon: function () {
+ var scale = this.options.iconScale;
+ var img = this._createIcon('icon');
+ img.onload = function () {
+ var i = new Image();
+ i.src = this.src;
+ this.style.width = Math.ceil(i.width * scale) + 'px';
+ this.style.height = Math.ceil(i.height * scale) + 'px';
+ };
+ return img;
+ },
+
_setIconStyles: function (img, name) {
L.Icon.prototype._setIconStyles.apply(this, [img, name]);
var options = this.options; |
Thx @kkdd i've made such code when attempting to handle icon scale, but there's still to handle the problem that some kmls generated by google use "de facto" 0.5 scale without providing the info in xml. So it would generate icons 2 times bigger on some existing maps... |
I found that the people in stackoverflow discussed the pre-scaling of icon size (see Showing custom icons in KML at their actual sizes). It seems to be such normalization that min(the width and height of icon size) should be 32-pixels. |
Popups on Placemarks now behave like GoogleEarth - they work only when
BalloonStyle/displayMode is not 'hide', to show:
name
description
if Placemark/description is provided. Otherwise the content of
BaloonStyle/text is used.
c.f.
https://developers.google.com/kml/documentation/kmlreference#balloonstyle