Mapbox-gl-js: 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
    });
  }

1. FitBound the map, when boundary info is updated via props/state.
2. 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);
      });
    }
  }

1. Zoom in and out the map
2. 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....
https://github.com/mapbox/mapbox-gl-js/issues/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.