Prevent deck.gl layers from displacement on Mapboxoverlay's Camera pitch/rotate

[ImanEmadi]

So i am having dekc.gl layers rendered over Mapbox, using Mapboxoverlay with interleaved:true

when i rotate my camera, or pitch up or down, i can see some layers are displaced, even though their data is unchanged and they should point to the exact same location on the map. why is it happening and how to prevent it ?
I guess it is some how related to how viewState is managed, but i can't understand how to examine it.

Any idea/help is greatly appreciated.

my code:

function DeckGLOverlay(props) {
    const overlay = useControl(() => new MapboxOverlay(props));
    overlay.setProps(props);
    return null;
}
function Map3D({ children, layers = [], style, ...props }) {

    const [viewState, setViewState] = useState({
        longitude: 10.5,
        latitude: 51.0,
        zoom: 5,
        maxZoom: 13,
        pitch: 50
    });

    return <>
        <Map
            mapStyle="mapbox://styles/mapbox/satellite-v9"
            mapboxAccessToken={MAPBOX_TOKEN}
            terrain={{ source: 'mapbox-dem', exaggeration: 1 }}
            attributionControl={false}
            onLoad={onMapLoad}
            style={style}
            initialViewState={viewState}
        >
            <Source
                id="mapbox-dem"
                type="raster-dem"
                url="mapbox://mapbox.mapbox-terrain-dem-v1"
                tileSize={512}
                maxzoom={18}
            />
            <Layer {...skyLayer} />
            <DeckGLOverlay layers={layers} {...props} interleaved />
        </Map>
        <a href="http://mapbox.com/about/maps" className={classes.mapboxLogo} target="_blank"
        >Mapbox</a>
        {children}
    </>
     }

Screenshot 1: location of a pathLayer in a certain camera pitch & angle

Screenshot2: PathLayer, displaced after moving the camera around. (rotated the camera about 180degress, now the paths are standing on a different coordinate)

this behavior seems to intensify as more paths are added to the data.
I am generating layers' ids by Math.random, but when putting them in console.log, i see it continuously logs that the layers Matched and it is copying state from previous layer.
is that a normal behavior ?

[Pessimistress]

This usually happens because deck.gl's camera is not aligned with Mapbox's camera. What deck.gl/Mapbox versions are you using?

i see it continuously logs that the layers Matched and it is copying state from previous layer.

The layer lifecycle message is for debug only, you should disregard it if you don't know what it means.

[ImanEmadi]

Both are latest major versions (deck,gl and react-map-gl)
for minor and patch versions i will have to see it tomorrow, but must be latest as i have installed them recently.

do i need to pass the viewState to the MapboxOverlay class inside the useControl ? i once tried that and it got much worse.

when i am visualizing one path only, this displacement doesn't seem to happen, or is happening very slightly that is not detectable.
if i am passing my layers like layers={[layerGroup1,layerGroup2,...]} and each layerGroup is an array of layers, can it result this de-alignment ?

[Pessimistress]

MapboxOverlay inherits its view state from the parent map. You should not try to set it yourself.

Number of layers or number of objects in a layer has nothing to do with your issue. You can try turn off terrain and see if that's the cause.

[ImanEmadi]

i commented out:

            <Source
                id="mapbox-dem"
                type="raster-dem"
                url="mapbox://mapbox.mapbox-terrain-dem-v1"
                tileSize={512}
            />

and it seems like that they still move around when i rotate the camera, what can be wrong ?
also all of my map related packages are at latest version.
Thanks.

    "@deck.gl/core": "^9.0.20",
    "@deck.gl/geo-layers": "^9.0.20",
    "@deck.gl/layers": "^9.0.20",
    "@deck.gl/mapbox": "^9.0.20",
    "@deck.gl/react": "^9.0.20",
    "mapbox-gl": "^3.4.0",
    "react-map-gl": "^7.1.7",

[ImanEmadi]

in the deck.gl example code, this Source component is absent, am i place it correctly in my code ?

Also, is this note on deck docs related to me?

Mapbox/MapLibre's terrain features are partially supported. When a terrain is used, the camera of deck.gl and the base map should synchronize, however the deck.gl data with z=0 are rendered at the sea level and not aligned with the terrain surface.

[ImanEmadi]

I added an onHover event, to my paths, and i can see that their coordinates are actually being changed, even though the data used to create these PathLayers has stayed the same!

[ImanEmadi]

as i see, This issue is not taking place when only 1 set of data is rendered.
also it seems like that when i am passing multiple arrays of paths, like layers={pathArray1,pathArray2}, the first pathArray seems to be acting correctly. why not others ?

[Pessimistress]

I added an onHover event, to my paths, and i can see that their coordinates are actually being changed

I cannot tell what you are logging in your screenshot.

why not others ?

You have not shared anything about what props you are passing to those layers, or what your data looks like. I can't help you by just looking at screenshots.

[ImanEmadi]

the logs are the coordinates array of the pillar pathLayer, obtained inside the info object of hover callback.
as seen in the screenshot, the values of lat and lon are changed.
first 2 logs are before moving the camera, 2 last logs are after moving the camera. path is displaced !

also the paths are something very similar to this, but i think the details shouldn't affect their behavior, specially stability in maintaining their lat & lon ?

 const layers_paths = data.map((e,i) =>   new PathLayer({
      id: 'path-layer',
      data:e.paths,
      getPath: ([lon,lat,alt]) => [[lon,lat,alt],[lon,lat,0]],
      getColor: [255, 0, 0],
      widthMinPixels: 5,
      pickable: true,
      onHover: handleHover,
      billboard:true
    }),)

[Pessimistress]

the logs are the coordinates array of the pillar pathLayer, obtained inside the info object of hover callback.

info.coordinate is the location of your pointer unprojected to the sea level plane. Your paths are in 3D. To obtain 3D coordinates you need to call deck.pickobject with unproject3D: true, see

https://deck.gl/docs/developer-guide/interactivity#calling-the-picking-engine-directly
https://deck.gl/docs/api-reference/core/deck#pickobject

[Pessimistress]

i think the details shouldn't affect their behavior, specially stability in maintaining their lat & long ?

Well, nobody else seems to be experiencing this issue, so unless you can provide a full reproduction, I don't know what to tell you.