CODEWITHSUNDEEP
typescriptionic-frameworkleafletreact-leaflet
Philippos Tsamantanis
Philippos Tsamantanis

Reputation: 33

React-leaflet: Default marker moves on zoom

I am creating a Ionic React project that uses react-leaflet to display markers on a map. I followed the instructions from the docs to get started and while everything renders perfectly, the default example marker keeps on moving when zooming in/out. Here is the relevant code:

import { MapContainer, Marker as LeafletMarker, Popup, TileLayer } from 'react-leaflet';

...
return (
<MapContainer id="mapId" center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
    <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <LeafletMarker position={[51.505, -0.09]}>
        <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
    </LeafletMarker>
</MapContainer>
);

The CSS for mapId is this:

#mapId {
    width: 100%;
    height: 500px;
    position: absolute;
    z-index: 0;
}

It works well in every other way so it seems like there aren't any steps missing. My dependencies are the following:

"dependencies": {
"@types/react": "^17.0.0",
"@types/react-leaflet": "^2.5.2",
"leaflet": "^1.7.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-leaflet": "^3.0.5",
"typescript": "3.8.3"

...

"devDependencies": {
    ...
    "@types/leaflet": "^1.5.19"
},

and I have included both the CSS and the JS from the leaflet docs:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

I have looked all over the place for an answer and the thing that keeps popping up is the iconAnchor and iconSize issue that users face when trying to use a custom icon for their markers. I even tried to do that with the default marker by creating a custom icon with the properties of the default one. That didn't work either. Your help will be appreciated.

UPDATE This is what the live project looks like when using default markers (markers are still not correct when not fully zoomed in) Map with default pointers

Upvotes: 3

Views: 2070

Answers (1)

ghybs
ghybs

Reputation: 53225

Both your Marker icon image and... your Tile Layer images are moving with zoom!

You have CSS rules that apply on ALL your <img>'s, therefore interfering with Leaflet Tile Layer images:

screenshot css img rules

img {
    margin-top: -2rem;
    margin-bottom: -4rem;
}

The effect can be subtly seen when changing the zoom level: the new tiles do not exactly cover the same geographic features as the tiles from previous zoom.

Once you disable these rules, the Tile Layer behaves correctly, and the parallax effect with the Markers is highly lessened... but not totally removed, because...

...your Marker icon images also have a strange iconAnchor setting, which depends on your zoom level:

screenshot marker icon iconAnchor setting

const markerIcon = new Icon({
    iconUrl: "/assets/icon/location.svg",
    iconSize: [50, 50],
    iconAnchor: [25, zoom > 15 ? 50 : 68 + defaultZoom - zoom]
});

this may have been an attempt to compensate for the tiles movement at low zoom, but seems counter productive after the previous issue is fixed.

Upvotes: 2

Related Questions