React-Leaflet: Marker has wrong position after zoom out

Question

When I show a marker in the center of the map it is OK. But when I zoom out, the marker is like staying in the same place. Finally, its position is very wrong.

Why is it not moving together with the map when zooming out? I user react-leaflet:

Answer 1

There is nothing wrong with the marker positioning, it just depends on the way marker icon is defined. Since you defined the marker icon without the iconAnchor option, the marker is positioned so that center of the icon is at [position.lat, position.lng] position. If your icon has dimensions [28, 46] and you want the bottom tip of the icon to be at a desired position, you must define your icon as:

let DefaultIcon = L.icon({
   iconUrl: icon,
   iconSize: [28, 46],
   iconAnchor: [17, 46]
});