React-leaflet: Default marker moves on zoom

Question

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/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />

<script src="https://unpkg.com/leaflet@1.7.1/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)

I'm not a react developer so maybe I'm wrong, but in all react examples that I saw `Marker` was used instead of `LeafletMarker` — Falke Design, Jan 12 '21 at 11:07
@DiogoLessa You can visit https://kite-spots.netlify.app to view a more complex version of the map that has the exact same issue. I simplified it above to make it more easily understandable. — Philippos Tsamantanis, Jan 12 '21 at 17:32
@FalkeDesign As you see I am importing Marker as Leaflet Marker — Philippos Tsamantanis, Jan 12 '21 at 17:33
What happens if you use this [icon](https://gist.github.com/kboul/881234200f89d6bffd7d584329735637) like this `` and replace the `iconUrl` with your icon? — kboul, Jan 12 '21 at 17:49
I'm going to edit the question to add an image of the result @kboul — Philippos Tsamantanis, Jan 12 '21 at 19:13
The problem occurs only when you do not specify an icon as an `L.icon` with `iconSize`, `iconAnchor` to the `Marker` comp when using webpack. I 've seen many cases like this and everything is ok when you specify it. I am not sure why it is not working for you. It is difficult to say more without seeing more code. — kboul, Jan 12 '21 at 19:19

score 2 · Accepted Answer · edited Jan 13 '21 at 04:15

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:

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:

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.

Wow! Thank you so much. I had no idea the icon was rendered as an img which meant that my img styles applied. This is why when I tried it during setup it didn't work either. You're a life saver! — Philippos Tsamantanis, Jan 14 '21 at 14:51

React-leaflet: Default marker moves on zoom

1 Answers1