Location of markers changes incorrectly while zooming in/out

[tanykim]

v 0.31.0:

Steps to Trigger Behavior

1. Initialize map in React componentDidMount()

  componentDidMount() {
    mapboxgl.accessToken = 'TOKEN_HERE';
    this.map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      center: [-122.431297, 37.773972],
      zoom: 10
    });
  }

2. FitBound the map, when boundary info is updated via props/state.
3. When the list of markers is updated (via props/state), then add makers in componentDidUpdate(), using DIV tag.

  componentDidUpdate(prevProps) {

    //data received in App
    if (!_.isNull(this.props.data)) {
      this.props.data.coors.map((coor, i) => {
        let el = document.createElement('div');
        el.className = 'marker new';
        return new mapboxgl.Marker(el)
          .setLngLat(coor)
          .addTo(this.map);
      });
    }
  }

4. Zoom in and out the map
5. Markers are not aligned correctly

Expected Behavior

Markers should stay in the same lat/lng no matter how the zoomed in/out

Actual Behavior

Markers are gradually aligned vertically.

[jfirebaugh]

Can you please provide a self-contained example that demonstrates the issue?

[tanykim]

It needs async calls with an internal development server, so I cannot replicate an self-contained example. but I added more explanation. Hope this helps. Let me know if it still needs clarification. Thanks a lot.

[jfirebaugh]

Can you create a minimal example that doesn't depend on your internal server. For example, with test data? Without a working example of the problem, we'll likely have to close this issue, as markers behave correctly in our tests.

[tanykim]

I've checked that the mapbox gl css file wasn't properly linked :) now it's working. thanks!

[nfarina]

Just got bit by this same issue, and the solution was the same as @tanykim, basically I wasn't linking in the CSS.

This is the first time I'm using Mapbox GL and I have included it in my project via npm+webpack, so it didn't occur to me to perform additional steps to include CSS since it appeared to be "working" right away - in that the map shows up and it's a map of the world.

I think it would be great if the Mapbox control somehow provided a warning when CSS is missing - perhaps a <div class="mapbox-missing-css">Missing CSS</div> with a new rule in the CSS file .mapbox-missing-css { display: none; }. Just an idea!

[anandthakker]

@nfarina oh neat idea! Captured this suggestion in #5359

[Altiano]

Encounter the same issue, never happened before,
@tanykim @nfarina How you guys manuallty link the CSS file?
I also use react (create-react-app)

[Altiano]

Ups, just solved it using import 'mapbox-gl/dist/mapbox-gl.css'

[colton-neifert]

The problem for me was position: relative on the marker.

[elharony]

I've faced that problem today when building a React App, and I've actually created a custom function to add the css file to the component, hope it help someone out:

function loadStyle(url) {
  let index  = window.document.getElementsByTagName("link")[0];
  let link = window.document.createElement("link");
  link.href = url;
  link.rel = 'stylesheet';
  index.parentNode.insertBefore(link, index);
}

Now, all you need is to use that function in the proper time (Before rendering the map):

loadStyle("https://api.mapbox.com/mapbox-gl-js/v1.3.0/mapbox-gl.css");

[es-ua]

Ups, just solved it using import 'mapbox-gl/dist/mapbox-gl.css'

OH! THANKS!!!!! it helped me as well! 👍 )

[Emixam23]

Hey!

Exact same issue over here, sad I didn't find your question before....
#9086

I couldn't make it work following your answer @es-ua , where did you put that import?

Maybe a sample for the react map and the markers would help

[kreba]

For anyone encountering such an issue in the future:

@Emixam23 You put this import statement in a JavaScript file, not in a (S)CSS file. This works if your project is set up in a way that allows importing css files in a js file. I use Nuxt and added the import to a custom mapbox.js plugin file. I guess I could alternatively have added it to a Vue component file.

I'm using the very nice (albeit scarcely maintained) vue-mapbox library. This also means that I had to import two css files: the one from mapbox-js and the one from vue-mapbox.

In addition, for me the default marker's picture is centered on the given coordinates, even though it should sit north of the coordinates. Adding an offset of [0, -20] helped in my case.

[raunometsa]

The problem for me was position: relative on the marker.

Same here! I just removed position: relative from my marker and it looks great again. I don't know why this happened though. I'm quite sure I haven't changed Mapbox library version nor have I added position: relative to my marker.

Before, with position: relative:

After removing position: relative:

[tb4764]

I solved it by adding

{
   href:"https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css",
   rel:"stylesheet"
},
{
   href:"https://cdn.jsdelivr.net/npm/vue-mapbox@latest/dist/vue-mapbox.css",
   rel:"stylesheet"
}

to the "link" in nuxt.config.js.

[wzr1337]

if you are building an angular app, add the following to your global.scss file:

...
// needed for proper map display
@import '~mapbox-gl/dist/mapbox-gl.css';

or for maplibre-gl:

...
// needed for proper map display
@import '~maplibre-gl/dist/maplibre-gl.css';

[FocusCookie]

I ran into this problem today and my problem was that I imported the mapbox-gl/dist/mapbox-gl.css in the component, but with a postcss compiler and tree shaking activated it was not compiled to the public css file. So I needed to import the mapbox-gl/dist/mapbox-gl.css into my main index.css of my react app.

I used postcss to use tailwind, so everybody with the same setup pay attention ;)

[abdul-Tz-prog]

Hello, I am still facing this issue (marker moving on zoom-in). I already used: import 'mapbox-gl/dist/mapbox-gl.css'; in my application, it is not working. I there something related to laravel-react mix application to consider here ? or something else is missing in my case ?
Looking forward for solution and reply from you guys.

[benoitv-code]

I had the same issue when using Mapbox 2.13.0, markers were moving out-of-position on some zoom levels when moving the map.

Root cause: The root cause of the bug was Mapbox defaulting to a globe projection mode, which apparently has issues when using a non-integer zoom level (like 5.5), either programatically or when a user is zooming in / zooming out.

Workaround: I fixed the issue by setting the projection mode to mercator:

    let map = new mapboxgl.Map({
     /* ... */
      projection: { name: "mercator" },
    });

(cc @abdul-Tz-prog)

[sunfeng90]

When I zoom the map, the marker moved the position. How to maintain the position of marker when i zoom the map?

The marker is add by myself. Following is my codes.

  const el = document.createElement('div');
  const width = point.properties.iconSize[0];
  const height = point.properties.iconSize[1];
  el.className = `map-marker-${point.type}`;
  el.style.width = `${width}px`;
  el.style.height = `${height}px`;
  el.style.backgroundSize = '100%';

  const marker = new mapboxgl.Marker(el)
    .setLngLat(point.geometry.coordinates)
    .addTo(map.value);

  markers.value.push(marker);

  el.addEventListener('click', (e) => {
    new mapboxgl.Popup({ offset: { 'top': [0, 0], 'bottom': [0, -40], 'left': [25, 0], 'right': [-25, 0] }, anchor: 'left' })
      .setLngLat(point.geometry.coordinates)
      .setHTML(`<div class='map-popup-${point.type}'>${point.message}</div>`)
      .addTo(map.value);

    e.stopPropagation();
  });