Deck.GL with CARTO and React

Question

I'm trying to use a CARTO basemap (@deck.gl/carto) with Deck.GL (@deck.gl/react) in a React application. To render a map layer, the docs utilize Mapbox's <StaticMap/> component from react-map-gl.

However, when I pass CARTO's free basemap BASEMAP.VOYAGER as a property to the <StaticMap component, it refuses to show the map because I don't have a Mapbox access token.

So, I registered and got a Mapbox token and it works just fine, like below:

      <DeckGL
        style={{
          position: "relative",
          width: "100%",
          height: "600px",
        }}
        initialViewState={initViewState}
        controller={true}
        layers={layers}
        onClick={(evt) => console.log(JSON.stringify(evt.coordinate))}
        getTooltip={({ object }) =>
          object &&
          object.coordinates && {
            text: `Longitude: ${object.coordinates[0]}\nLatitude: ${object.coordinates[1]}\nCost: ${object.cost}`,
          }
        }
      >
        <StaticMap
          mapStyle={BASEMAP.DARK_MATTER}
          mapboxApiAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
        />
      </DeckGL>

But I want to use a CARTO basemap WITHOUT using Mapbox. Is that at all possible? It seems that the only way I can get a CARTO basemap is by building a map via their Map Builder tool on their website, publish it, and then use the link generated from that to then use it. But I can't create a basemap until I link datasets to the map (ie .csv, URL, database, arcGIS, etc.). Right now, I don't have any of that.

So I'm confused as to how to actually access and use a CARTO basemap without using Mapbox. Any tips or advice is much appreciated!

Answer 1

A workaround would be installing 5.3.11 version, so you app won't require a Mapbox token, that's due to internal use of Mapbox v2.0

yarn add [email protected]