Mapbox: Add controller to Deck.gl component

I'm trying to disable scrollZoom in my DeckGL component. I am, however, having difficulty understanding the documentation for passing Controllers to these objects. My current implementation simplified for brevity is:

  new Deck({
    controller: { scrollZoom: false },
    initialViewState: {
      latitude: 42.508108,
      longitude: -71.508701,
      zoom: 10,
      maxZoom: 18,
      minZoom: 4,
      pitch: 45,
      bearing: 0,
    },
  });

return (
    <>
      <DeckGL
        ContextProvider={MapContext.Provider}
        controller={true}
        effects={effects}
        getTooltip={getTooltip}
        initialViewState={INITIAL_VIEW_STATE_AREA}
        layers={layers}
        onWebGLInitialized={onInitialized}
      >
        <InteractiveMap
          reuseMaps
          ref={mapRef}
          mapStyle={MAP_STYLE}
          preventStyleDiffing={true}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        />
      </DeckGL>
    </>

The code above returns a static map. I would've expected the code map to enable you to pan but not scroll.

Is there an example or additional documentation that provides a better understanding of this implementation?

1 answer

  • answered 2021-02-23 16:20 mmz

    Ok so Deck is the non-React flavor of DeckGL. To adapt the example in the documentation you have to pass the controller prop to the DeckGL component. So, for example:

     <DeckGL
            ContextProvider={MapContext.Provider}
            controller={{ scrollZoom: false }}
            effects={effects}
            getTooltip={getTooltip}
            initialViewState={INITIAL_VIEW_STATE_AREA}
            layers={layers}
            onWebGLInitialized={onInitialized}
          >
            <InteractiveMap
              reuseMaps
              ref={mapRef}
              mapStyle={MAP_STYLE}
              preventStyleDiffing={true}
              mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
            />
          </DeckGL>
    

    This line changed: controller={{ scrollZoom: false }}