[Bug] When 3D terrain is enabled, the clickable area of a line layer is not aligned its visual representation

[dstantwo]

Description

I have a small demo to reproduce this issue where I'm displaying the Half Dome hiking trail as a geojson source/layer on a map with 3d terrain enabled. I've made the layer clickable with the interactiveLayerIds prop.

With react-map-gl, the line layer renders, but the clickable area of the line is not aligned with the visual representation of the layer. You can see in the video below that the cursor turns into a pointer some distance away from the line. 🔗 Here's a code sandbox link to this react-map-gl demo (you'll have to add your own Mapbox token in App.js) https://codesandbox.io/s/react-map-gl-terrain-layer-bug-t5p3vw?file=/src/App.js

For comparison, a nearly identical setup that uses mapbox-gl directly (without using react-map-gl), works as expected so that the clickable area of the line aligns with the visual representation. 🔗 Here's a code sandbox link to this mapbox-gl only demo (again, you'll have to add your own Mapbox token in App.js) https://codesandbox.io/s/mapbox-gl-js-terrain-layer-working-5f8vm2?file=/src/App.js

Expected Behavior

I would expect the clickable area of a geojson layer to align with the layer's visual representation in react-map-gl as it does in plain mapbox-gl

Steps to Reproduce

• A react-map-gl demo (you'll have to add your own Mapbox token in App.js), which shows the broken behavior https://codesandbox.io/s/react-map-gl-terrain-layer-bug-t5p3vw?file=/src/App.js
• A nearly identical setup using only mapbox-gl that works as expected https://codesandbox.io/s/mapbox-gl-js-terrain-layer-working-5f8vm2?file=/src/App.js

Environment

• Framework version:
  • react-map-gl@7.0.21 (in code sandbox demos)
  • Also reproduced in my full project with react-map-gl@7.0.25
• Map library: mapbox-gl@2.13.0
• Browser: Chrome
• OS: MacOS 12.6.3

Logs

No response

[jonshutt]

I'm just investigating a similar issue - which is that when you click the map, and add a marker that point, the marker that appears in in a slightly different place. Also, when you add a draggable marker, when you drag it, it doesn't move up and down to track the terrain (it does this when dragging a marker using mapbox without react-map-gl), then when you stop dragging, pan the map, it jumps.

It seems to me, the whatever interprets mouse pointer the position isn't factoring in terrain.

[Pessimistress]

Fixed in 7.1.6

[amaclean2]

Still the same behavior in 7.1.7. I created a geoJSON point at [e.lngLat.lng, e.lngLat.lat] to represent the cursor location and in steeper terrain it's vastly off the cursor pointer.

[VahanLab]

I confirm this issues still occurs on our side too. Also when moving the map while 3D is activated, markers are randomly jumping from their original positions. This issue is quite critical, issue is not closed

[amaclean2]

Weirdly, it's not an issue when you use the useEffect implementation given from MapBox. So it's something that's lost in translation from that to React-Map-GL

[VahanLab]

@amaclean2 could you please share the code snippet you mentioned using useEffect? I'd love to have a way to get rid of this bug