Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Leaflet Marker not static on position

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");
like image 599
Jason Krs Avatar asked Jun 14 '16 00:06

Jason Krs


1 Answers

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.

like image 137
ghybs Avatar answered Oct 16 '22 03:10

ghybs