Leaflet Marker not static on position

Question

I have notice that my leaflet markers are "not staying put" on a given lat/lon. When I zoom in on the map, the marker moves to adjust and take the correct position. When I zoom out, it goes to a different position. It'snot static on the position. How can I fix this ?

There is nothing special about my marker. below is how I built it

var LeafIcon = L.Icon.extend({
    options: {
        iconSize:     [12, 15],
        shadowSize:   [30, 40],
        iconAnchor:   [11, 70],
        shadowAnchor: [2, 42],
        popupAnchor:  [-3, -40]
    }
});

var map_icon = new LeafIcon({iconUrl: 'icon_marker.png'});
var marker;

marker = L.marker([my_lat, my_lon], {icon: map_icon});
    marker.addTo(map);
    marker.bindPopup("My markers' popup");

ghybs ghybs · Accepted Answer · 2016-06-14T02:32:09

The symptom you describe is typical of incorrect iconAnchor setting.

It is strange that your iconAnchor is outside iconSize.

To make sure your settings are properly defined, you could add an extra marker with default icon at the same lat/lng coordinates, and see if your custom icon tip is at the same position.

Leaflet Marker not static on position

1 Answers