CODEWITHSUNDEEP
reactjsmapboxmapbox-gl-jsdeck.glreact-map-gl
mmz
mmz

Reputation: 1151

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?

Upvotes: 1

Views: 1121

Answers (1)

mmz
mmz

Reputation: 1151

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 }}

Upvotes: 1

Related Questions