Deck.gl: Mapbox's map moves while I'm dragging Scatterplot layer

Created on 23 Mar 2020  路  2Comments  路  Source: visgl/deck.gl

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,
    },
  });
question

All 2 comments

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.

```
{...viewport}
mapStyle="mapbox://styles/mapbox/dark-v9"
onViewportChange={setViewport}
mapboxApiAccessToken={
process.env.REACT_APP_MAPBOX_TOKEN
}
>
latitude={coordinates[1]}
longitude={coordinates[0]}
offsetTop={-20}
offsetLeft={-10}
draggable
onDragEnd={event => setCoordinates(event.lngLat)}
>
// I created a dot-shaped CSS form to be the icon

Was this page helpful?
0 / 5 - 0 ratings