0

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

bumped to the homepage by Community 17 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.