Use shadow transform for all pointer events

[jonshutt]

Mouse events seem to be returning locations without elevation. This handled for _queryRenderedFeatures, but other pointer events return the wrong location.

#2248

[kaij]

I also see this problem and tried this pull request against 7.2.0-beta.1 (using maplibre). It seems to work better with mouse events. However, markers (and 3d overlay layers as well) still jump around erratically. I think this makes react-map-gl currently unusable when having terrain and markers. Which is a pity since there is this nice plugin react-three-map.

Using maplibre 4.0.1 standalone (without react-map-gl), none of the problems occur: movement in heavy terrain is stable, markers and 3d overlay layers as well.

It's possibly a hard-to-find, small fix in the transform sync (and maybe maplibre behaves differently than mapbox). Any idea?

[jonshutt]

Hi Kai

I agree, the issue makes this library unusable with terrain and markers/clicking.

I'll have another look at this issue myself. I'm also wondering it this._renderTransform just isn't being updated when the terrain is added - so basically the library thinks the transform is flat, and mapbox knows it has terrain.

[jonshutt]

I've been looking at this again, and I'm very sure what's happening is that after terrain source data is loaded, the mapbox transformation info changes to include this, and react-map-gl isn't updating it's shadow copy.

I've tried adding the following into the _initialize function
map.on('sourcedata', (event) => { if (event.sourceId === 'mapbox-dem') { map.transform = this._renderTransform; } });

this does run multiple times as mapbox does keep loading more terrain data, but it does seem to fix most the problems. However, I noticed that camera jumps up and down when after moving over areas with terrain.

I tracked that down to _updateViewState, and commented out the lines that sets the camera elevation
eg, tr.cameraElevationReference = 'sea';. I suspect this was to fix issues with the camera not being aware of the terrain due to having the wrong transform set

There's also various that seem to switch out the transform (map.transform = ) while doing something, and set it back afterwards. I've commented all these out, I think they're all there as workarounds, but the cause is that transform is wrong.

[Pessimistress]

Thank you for looking into this. The handling of terrain has been rather frustrating and, as you can see, still problematic after several hacks into the internals of Mapbox.

I have a write up here about why all these are needed. In the near future I'm going to split out the wrapper for MapLibre since they now have a callback to support the reactive use case. So at least we don't have to think too much about compatibility.

[chrisgervang]

@Pessimistress has published an early alpha of this new wrapper at https://github.com/visgl/react-maplibre
We're still working out how we'll publish this new work before it comes out of alpha, but it would be great to hear if this helps the issue you're experiencing in maplibre.