[GIS] Leaflet Customer Marker Changes Position with Scale

leafletmarkerszoom

I am using a customer marker to represent metro stops in my leaflet map. The problem is that the markers are changing their position every time I zoom in or out. When I finally zoom in to the last level they reach their specified position. How can I make them stay at the same place at all times like the default leaflet markers? The icon anchor option isn't working for me. Which option or property am I missing?

Best Answer

I was able to solve this issue by just deleting/not specifying the iconAnchor property of the custom icon. Then the 'icon's center' will always remain at the correct position by default.

Related Solutions

[GIS] Change anchor of leaflet icon

The most simple would probably be to update the icon options (for iconSize and iconAnchor), then to use marker.setIcon(newOrUpdatedIcon) with the updated icon to re-draw the latter without affecting the marker latLng position.

Demo: http://jsfiddle.net/ve2huzxw/1/

In your case you would probably change the icon html content at the same time.

[GIS] React-Leaflet: Marker has wrong position after zoom out

There is nothing wrong with the marker positioning, it just depends on the way marker icon is defined.

Since you defined marker icon without iconAnchor option, marker is positioned so that center of the icon is at [position.lat, position.lng] position. If your icon has dimensions [35, 46] and you want the bottom tip of the icon to be at desired position, you must define your icon as:

const customMarker = new L.icon({
    iconUrl: '/images/icons/location-pointer.svg',
    iconSize: [35, 46],
    iconAnchor: [17, 46]
});

There is one other condtion for .svg icon to be positioned properly. viewBox of .svg icon has to correspond to icon dimensions.

Best Answer

Related Solutions

[GIS] Change anchor of leaflet icon

[GIS] React-Leaflet: Marker has wrong position after zoom out

Related Question