Adding a previously removed KML layer with hotspot element

[TitanicBush]

First, God bless you for creating this project. It's great.

I added a KML layer to my project that I created from a Google map and found that my marker locations were offset by some amount in my map. After some research, I realized that I needed to use the "hotspot" element to offset the location of my custom icon. This worked like a charm until I realized that I needed to remove this layer in higher zoom levels.

When I add a previously removed kml layer, the markers are located in a different place and seem to be somewhat "disconnected" from the map's baselayer.

Put a different way, when I first load the kml layer, the markers are exactly where I want them to be. As long as they are not removed, the markers are located perfectly. However, when I zoom out completely (triggering the "remove") and then zoom back in (adding the second "add"), I see that the markers are misplaced.

I've looked through KML.js and found nothing that appears to be a smoking gun. I'd appreciate any suggestions you might have or effort you could spare.

[TitanicBush]

I believe that I may have found the cause of the behavior that I'm seeing. The problem is in the _setIconStyles method where my "hotspot" offset is being added to the height of the image to create the top margin. My "y" offset is in options.anchorRef.y.

img.style.marginTop  = (options.anchorRef.y - img.height + 1) + 'px';

On the initial "add", img.height is 0, but upon subsequent "add"s, img.height is the actual image height. When I comment out img.height, the anchor is placed consistently in the same spot.

[brunob]

I think i've already seen this kind of offset problem which seems to be due to latency when loading icon image. It disappear if you reload the page... Maybe we can find a way to handle this problem.

For your case, the problem is not on second add but on first shot. Icons seems misaligned on second add but they are not, they are just applied the offset defined in the hotspot tag of your kml.

[Ojaybee]

@TitanicBush in the _setIconStyles method I can only see styles for the popupAnchor rather than the hotSpot.
_setIconStyles: function (img, name) { L.Icon.prototype._setIconStyles.apply(this, [img, name]); var options = this.options; this.options.popupAnchor = [0,(-0.83*img.height)];

Points from my KML seem highly mobile on zoom. Is there a solution to this?

[LePew]

Hi.
Probably a bit late, but I recently jumped into leaflet and this great KML plugin. I encountered the problem described here: icon were not displayed on the right place (wrong anchor) on the first addmap call.
I solved this by adding those 2 lines in KML.js (sorry, I'm new to github and can't modify the code inline). It works fine with FIrefox and Konqueror on linux :
L.KMLIcon = L.Icon.extend({
_setIconStyles: function (img, name) {
L.Icon.prototype._setIconStyles.apply(this, [img, name]);
img.style.maxWidth=img.width + 'px';
img.style.maxHeight=img.height + 'px';
var options = this.options;
this.options.popupAnchor = [0,(-0.83*img.height)];
if (options.anchorType.x === 'fraction')
img.style.marginLeft = (-options.anchorRef.x * img.width) + 'px';
if (options.anchorType.y === 'fraction')
img.style.marginTop = ((-(1 - options.anchorRef.y) * img.height) + 1) + 'px';
if (options.anchorType.x === 'pixels')
img.style.marginLeft = (-options.anchorRef.x) + 'px';
if (options.anchorType.y === 'pixels')
img.style.marginTop = (options.anchorRef.y - img.height + 1) + 'px';
}
});