I'm using Deck.gl to display a small marker on the Mapbox map. But when I drag the Icon, the map moves as well. How can I make so that the map doesn't move while I'm dragging a layer's object?
The Map instance
<DeckGL
initialViewState={{
longitude: viewport.longitude,
latitude: viewport.latitude,
zoom: viewport.zoom,
}}
height={viewport.height}
width={viewport.width}
layers={layers}
>
<ReactMapGL
mapStyle="mapbox://styles/mapbox/dark-v9"
mapboxApiAccessToken={
process.env.REACT_APP_MAPBOX_TOKEN
}
/>
</DeckGL>
The layer
const layerIcon = new ScatterplotLayer({
id: 'scatter-layer',
data: [
{
coordinates: [coordinates[0], coordinates[1]],
color: [44, 100, 255],
},
],
opacity: 0.9,
filled: true,
radiusMinPixels: 15,
getPosition: d => d.coordinates,
getFillColor: d => d.color,
onDrag: event => setCoordinates(event.lngLat),
pickable: true,
parameters: {
[LumaGL.DEPTH_TEST]: false,
[LumaGL.BLEND]: true,
[LumaGL.BLEND_DST_RGB]: LumaGL.ONE,
[LumaGL.BLEND_EQUATION]: LumaGL.FUNC_ADD,
},
});
sounds like you might be interested in this
https://nebula.gl/#/examples/editable-geo-json/points
I manage to solve the problem, if anyone happens to have the same problem as I had in the future.
I completely scrapped Deck.gl and just used the native marker from react-map-gl.
```
mapStyle="mapbox://styles/mapbox/dark-v9"
onViewportChange={setViewport}
mapboxApiAccessToken={
process.env.REACT_APP_MAPBOX_TOKEN
}
>
longitude={coordinates[0]}
offsetTop={-20}
offsetLeft={-10}
draggable
onDragEnd={event => setCoordinates(event.lngLat)}
>