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

leafletmarkersreactzoom

When I show a marker in the center of the map it is OK.
But when I zoom out, the marker is like staying at 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:

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

...

renderMarker(position) {
    if (position) {
        return (
            <Marker 
                position={[position.lat, position.lng]} 
                icon={customMarker} 
            >
            </Marker>
        );
    }
}

...

render() {
        return (
            <Map 
                ref={this.mapRef}
                center={positionMap} 
                zoom={position.zoom}
                onClick={this.handleClick}
                onMoveend={this.handleMoveEnd}
                dragging={true}
                scrollWheelZoom={false}
            >
                <TileLayer
                    attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                    url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
                />
                    { this.renderMarker(this.props.locationData.locations[0]) }

            </Map>
        );
    }
}

enter image description here

enter image description here

Best Answer

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.

Related Question