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!