Markers moves to incorrect positions when using a "globe" projection with a non-integer zoom level

[benoitv-code]

Markers are moving out-of-position when dragging the map when using a "globe" projection with a non-integer zoom level (either set programmatically or when a user is zooming in / zooming out)

mapbox-gl-js version: 2.13.0

browser: Chrome 110.0.5481.178

Steps to Trigger Behavior

1. Use mapbox://styles/mapbox/streets-v12 (or the globe projection mode) with a zoom: 5.5
2. Set a marker somewhere (like on [-0.481707, 48.916776])
3. Move the map far to the left and the right, and see the marker moving in wrong positions

Link to Demonstration

Simple repro: https://codepen.io/benoit42/pen/yLxVMMo

Expected Behavior

Marker stays at a correct position when dragging the map

Actual Behavior

Marker moves to incorrect positions when dragging the map from left to right:

Workaround

Not great, but setting the projection mode to mercator fixes the issue:

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

[stepankuzmin]

Hi @benoitv-code,

Thanks for reporting this issue. It seems that this issue appears on the Globe to Mercator transition zoom levels.

[tonnoz]

I have a similar issue, possibly related: while on projection="globe", some of my features appears invisible when zooming in (unclustering). The issue appear only in globe projection, switching to mercator fixes it. I tried to look around my marker to see if it's a precision issue but seems like the feature are nowhere to be found around my visible marker.

edit: my layers disappear after the zoom level is >=6

My ugly workaround right now:

<MapGL
     projection={zoom < 6 ? "globe": "mercator"} //TODO: fix me
     initialViewState={mapSettings.defaults}
     ...
/>      

[tonnoz]

Hi @benoitv-code,

Thanks for reporting this issue. It seems that this issue appears on the Globe to Mercator transition zoom levels.

any plans for the fix @benoitv-code ?

[benoitv-code]

@tonnoz I did the same as you, switching to mercator as the trade-off is acceptable for me. Will switch back to default ("globe") if it gets fixed on mapbox-gl side.

[tonnoz]

it seems like a proper bug, would love some clarification from the team

[inigopanos]

Hello, I have a similar problem, but my markers are directly offseted on Y and don't seem to be anchored to the map, but rather to the camera, as when I zoom in and out they move. I put it here in case this issue hasn't been solved. Switching projection to mercator does not fix it, or any projection for that matter. Location coordinates are the same for the markers and the popups.

https://github.com/mapbox/mapbox-gl-js/assets/47386848/e61bb3c8-d933-44e7-b009-350037ccda11

The code I have: ` const map = new mapboxgl.Map({ container: 'mapElementId', style: 'mapbox://styles/mapbox/streets-v12', center: [-4.739859783755799, 40.110300848632406], // starting position [lng, lat] zoom: 1, });

  map.scrollZoom.enable();
  map.boxZoom.enable();
  map.dragPan.enable();
  map.setMaxBounds(bounds);
  map.setProjection('mercator');

  const markerCoords = this.setLngLatCoordinates();
  const markers: mapboxgl.Marker[] = [];
  const popups: mapboxgl.Popup[] = [];

  for (let i = 0; i < Object.keys(markerCoords).length; i += 1) {

    console.log('Hola mundo:', markerCoords[`ruinCoordsMarker${i}`]);

    popups[i] = new mapboxgl.Popup()
      .setLngLat(markerCoords[`ruinCoordsMarker${i}`])
      .setHTML(JSON.stringify(markerCoords[`ruinCoordsMarker${i}`]))
      .addTo(map);

    markers[i] = new mapboxgl.Marker()
    .setLngLat(markerCoords[`ruinCoordsMarker${i}`])
    .setPopup(new mapboxgl.Popup().setHTML('Tu texto aquí'))
    .setPitchAlignment('map')
    .addTo(map);
  }

`