Search code examples
reactjsmapboxmapbox-gl-jsdeck.glreact-map-gl

Add inertia to react-map-gl map


I'm using Deck.gl to render a Mapbox map. I'm hoping to add inertia when panning with the cursor. However, adding inertia={100}, or any number, doesn't add inertia. I'm following this guide from Deck.gl.

Here is my simplified code:

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

        />
</DeckGL>

I'm not getting any errors, making the cause tricky to debug.


Solution

  • Two things:

    1- Which deck.gl version are you using? inertia was added in 8.4.0-beta.1

    2- inertia is false by default, try adding:

    controller={{ inertia: true }}

    or

    controller={{ inertia: Number }}