Mapbox-gl-js: Pop up ist not positioned properly

[Stophface]

mapbox-gl-js version:
1.2.0

browser:
Chrome

Steps to Trigger Behavior

this.map = new mapboxgl.Map({
  container: this.mapContainer,
  style: 'mapbox://styles/mapbox/streets-v9',
  accessToken: '...',
});


this.map.on('load', async () => {
  this.map.addSource('data', {
    type: 'geojson',
    data: this.props.geoJson
  });

  this.map.addLayer({
    id: 'points',
    type: 'circle',
    source: 'data',
    paint: {
      'circle-radius': 5,
      'circle-color': 'hotpink',
    },
  });
});

this.map.on('click', 'points', event => {
  var coordinates = event.features[0].geometry.coordinates.slice();
  while (Math.abs(event.lngLat.lng - coordinates[0]) > 180) {
    coordinates[0] += event.lngLat.lng > coordinates[0] ? 360 : -360;
  }

  new mapboxgl.Popup({
    closeButton: true,
    closeOnClick: false,
  })
    .setLngLat(coordinates)
    .setHTML(event.features[0].properties.id)
    .addTo(this.map);
});

Expected Behavior

I want the pop up to open on the Marker.
When I check coordinates, used in .setLngLat(), its an array with the same coordinates like the marker has.

Actual Behavior

The pop up is opened far away from the marker.
The missplacement can be seen here.
https://ibb.co/Hz8zqfW
https://ibb.co/99ZF1ZC

[ryanhamley]

This works as expected when I tried it. I don't think this is a bug in GL JS so I'm going to close the issue. If you suspect that it is a bug, you can reply with a minimal working example in JSBin and we can take a look. If you just need general support, please contact Mapbox Support.

I'd also note that you can simplify your click event listener a good bit because event contains a lngLat object and it's not necessary to normalize the longitude and latitude unless you specifically need that for your application.

Something like this will work.

var coordinates = Object.values(event.lngLat);

new mapboxgl.Popup(...)
.setLngLat(coordinates)
....

[Stophface]

Well,
the problem was that the css is missing.
When using react and Mapbox GL JS not only this one

import mapboxgl from 'mapbox-gl';

is needed, but this one

import 'mapbox-gl/dist/mapbox-gl.css';

too...