DeckGL IconLayer svg icon not coplanar to TileLayer OSM

94 views Asked by At

I am trying make a navigator in React (google-map-like) with an svg navigation arrow. I am using OSM with a TileLayer and IconLayer for the svg arrow. The problem is that when I tilt the view (third-person POV) the arrow doesn't stay coplanar to the map but tilts with the view, so I get an arrow pointing to the sky.top POV and third-person POV.

const navIconLayer = new IconLayer({
        id: 'icon-layer',
        parameters: {
            depthTest: false
        },
        data: [[position?.coords.longitude, position?.coords.latitude]],
        getIcon: (d, { index }) => ({
            url: svgToDataURL(createSVGIcon(index)),
            width: 24,
            height: 24
        }),
        sizeScale: 10,
        getSize: d => 3,
        getPosition: d => d,
        getAngle: d => (position?.coords.heading ?? 0) + 45
    });

    const layer = new TileLayer({
        data: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
        id: 'osm-tiles',
        minZoom: 0,
        maxZoom: 19,
        tileSize: 256,
        renderSubLayers: (props: any) => {
            const {
                bbox: { west, south, east, north }
            } = props.tile;
            return new BitmapLayer(props, {
                data: undefined,
                image: props.data,
                bounds: [west, south, east, north]
            });
        }
    });

So I would like to have the svg coplanar to the map even when tilting the view. Maybe I am using IconLayer wrong? Should I use some 3D layer to represent the arrow? I tried every solution I could find here whitout any result... Thank you very much for your help!

0

There are 0 answers