react-map-gl Marker is moving when zooming the map

Question

I've built a React app with a map component which renders a map. I tried to add a marker, but the marker keeps moving when I zoom. What is causing this to happen?

import MapGL, { Marker } from "react-map-gl"
import { useState } from "react";

const Map = () => {
    const [viewState, setViewState] = useState({
        longitude: 4.895168,
        latitude: 52.370216,
        zoom: 10,
    })
    const [marker] = useState({
        longitude: 4.895168,
        latitude: 52.370216,
    })

    return (
        <div className="map">
            <MapGL
                {...viewState}
                style={{ width: "100%", height: "100%" }}
                mapStyle="mapbox://styles/mapbox/streets-v9"
                onMove={(evt) => setViewState(evt.viewState)}
                mapboxAccessToken="my_token"
            >
                <Marker
                    {...marker}
                />
            </MapGL>
        </div>
    )
}

export default Map;

score 9 · Accepted Answer · answered Feb 06 '22 at 18:22

9

The problem was this missing line in my index.html:

<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">

The documentation tells you nothing about it, had to find it in the source code of this example: https://github.com/visgl/react-map-gl/tree/7.0-release/examples/controls

answered Feb 06 '22 at 18:22

Tim MG

426
5
17

i get cors error using this – Farhad May 30 '22 at 13:54

Anubhav Garg · Answer 2 · 2023-04-01T13:58:48.183

3

This is not the right solution for me. The solution is very simple

Step 1: Go to your index.js file
Step 2: Then add import 'mapbox-gl/dist/mapbox-gl.css';

And just restart the server. The error will surely be resolved.

edited Apr 01 '23 at 13:58

answered Apr 01 '23 at 13:57

Anubhav Garg

41
3

score 0 · Answer 3 · answered Mar 19 '23 at 10:20

For me, the solution was different. For some reason, the marker object was rendered so that its top left corner is fixed at the specified location. This is different from the convention that the bottom middle of the marker is fixed at the location. The result is that when you zoom out, all the marker corners seems to change location on the map except for the top left corner. Solved it by adding :

style={{
  width: "50px",
  height: "50px",
  position: "relative",
  top: "-50px",
  left: "-25px",
}}

to my marker JSX to make it's bottom middle fixed instead

react-map-gl Marker is moving when zooming the map

3 Answers3