[Bug] `map.flyTo` centers on the incorrect spot when terrain is enabled.

[erichcarson]

Description

I recently tried to upgrade our version of react-map-gl to v7.0.25. During the upgrade I encountered a bug where map.flyTo goes to the incorrect location when map.setTerrain() has been called. Once at the incorrect location, if I manually move the map around, the Marker at that location stutters between the actual location and several incorrect locations.

Video with terrain and incorrect behavior: https://github.com/visgl/react-map-gl/assets/127768277/fea86023-6558-457c-898a-eff71924333d

Video without terrain and correct behavior: https://github.com/visgl/react-map-gl/assets/127768277/9f7d02b3-537a-49b7-a613-50fcfa17d97b

Expected Behavior

With terrain enabled, I would expect the same behavior as without terrain enabled. flyTo should center the map view on the actual location of the Marker taking into account the terrain information. This was working when using react-map-gl v6.1.10.

Steps to Reproduce

Behavior is reproducible at this sandbox, although you will need your own Mapbox API token.

Comment out the following line (line 21) to toggle the behavior:

map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });

Environment

• Framework version: react-map-gl@7.0.25
• Map library: mapbox-gl@2.1.1
• Browser: Chrome Version 112.0.5615.137
• OS: MacOS

Logs

No error logs present in the console.

[loganbrunner]

Is there any update on this? I am also experiencing a similar issue. When the terrain is enabled, my popup is not rendering where expected (both on a hillside as well as on a flat area).

See this screenshot, where I would expect the popup to only appear when my cursor is over the blue feature, yet it appears even when my cursor is just outside of the polygon. This does not occur if I don't include terrain on my map.

I think this has something to do with the order in which the source layer is added and the terrain source is set. Mapbox GL JS seems to add the source layer and then set the terrain (code taken from this Mapbox example):

map.on('style.load', () => {
  map.addSource('mapbox-dem', {
    'type': 'raster-dem',
    'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
    'tileSize': 512,
    'maxzoom': 14
  });
  // add the DEM source as a terrain layer with exaggerated height
  map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
});

It is not clear to me the order that react-map-gl adds the source and sets the terrain source, but the terrain source is set already on the Map component, while the source layer itself is a child of the map. Example of this from react-map-gl.

When I render the map using exclusively Mapbox GL JS, the popup works as expected (even on 3D terrain), while when using react-map-gl, this bug appears.

I also think this is a similar issue to #2196.