DeckGL: Prevent map movement when dragging elements

Question

I have a DeckGL map, on which I placed a button:

<DeckGL
      ContextProvider={MapContext.Provider}
      controller={true}
      effects={effects}
      getTooltip={getTooltip}
      initialViewState={INITIAL_VIEW_STATE_AREA}
      layers={layers}
      onWebGLInitialized={onInitialized}
    >
      <Button
        text="Search"
        style={{ position: "absolute", top: 10, left: 10 }}
      ></Button>
      <StaticMap
        reuseMaps
        mapStyle={MAP_STYLE}
        preventStyleDiffing={true}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      />
    </DeckGL>

When I drag over the button, which is overlaid on the map, it also moves the map behind that button. Is there any way to prevent that movement? That is, prevent the map from being moved when dragging over an element?

Could you create a codepen/sandbox please? – AdriSolid Feb 20 '21 at 08:10 — AdriSolid, Feb 20 '21 at 08:10
@AdriSolid thanks for the comment. Was able to solve it – mmz Feb 20 '21 at 14:03 — mmz, Feb 20 '21 at 14:03

score 0 · Answer 1 · answered Feb 20 '21 at 14:03

Ok I got it. The issue was component placement/ordering. The should be placed outside the DeckGL component. That way, the map will be rendered full screen with the button being rendered truly on top of the map. Here's the updated code for anyone who might come across this:

    <>
      <Button
        text="Search"
        style={{ position: "absolute", top: 10, left: 10 }}
      ></Button>
      <DeckGL
        ContextProvider={MapContext.Provider}
        controller={true}
        effects={effects}
        getTooltip={getTooltip}
        initialViewState={INITIAL_VIEW_STATE_AREA}
        layers={layers}
        onWebGLInitialized={onInitialized}
      >
        <StaticMap
          reuseMaps
          mapStyle={MAP_STYLE}
          preventStyleDiffing={true}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        />
      </DeckGL>
    </>

DeckGL: Prevent map movement when dragging elements

1 Answers1