Skip to main content

BASEMAP

CARTO basemaps are available and they can be used without a token.

Ensure you follow the Terms and Conditions when using them.

Usage

React

Important Note: Mapbox-GL-JS v2.0 changed to a license that requires an API key for loading the library, which will prevent you from using react-map-gl ( a higher level library). They have an in-depth guide about it here.

In short, if you want to use the library without a Mapbox token, then you have two options: use a react-map-gl version less than 6.0 (npm i react-map-gl@5), or substitute mapbox-gl with a fork.

To install the dependencies from NPM:

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers @deck.gl/carto
import {DeckGL} from '@deck.gl/react';
import {StaticMap} from 'react-map-gl';
import {BASEMAP} from '@deck.gl/carto';
<DeckGL initialViewState={INITIAL_VIEW_STATE} controller={true} layers={layers}>
<StaticMap mapStyle={BASEMAP.POSITRON} />
</DeckGL>;

Standalone

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/carto@^9.0.0/dist.min.js"></script>

<!-- or -->
<script src="https://unpkg.com/@deck.gl/core/@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/mesh-layers@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/geo-layers@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/extensions@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/carto@^9.0.0/dist.min.js"></script>

<!-- basemap provider -->
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
const map = new maplibregl.Map({
container: 'map',
style: deck.carto.BASEMAP.POSITRON,
interactive: false
})
const deckgl = new deck.DeckGL({
canvas: 'deck-canvas',
initialViewState: {
latitude: 0,
longitude: 0,
zoom: 1
},
onViewStateChange: ({viewState}) => {
const {longitude, latitude, ...rest} = viewState;
map.jumpTo({center: [longitude, latitude], ...rest});
}
controller: true
});

Supported basemaps

There are several basemaps available today:

  • POSITRON
  • DARK_MATTER
  • VOYAGER
  • POSITRON_NOLABELS
  • DARK_MATTER_NOLABELS
  • VOYAGER_NOLABELS
NAMEPREVIEWSTYLE URL
POSITRONhttps://basemaps.cartocdn.com/gl/positron-gl-style/style.json
DARK_MATTERhttps://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json
VOYAGERhttps://basemaps.cartocdn.com/gl/voyager-gl-style/style.json
POSITRON_NOLABELShttps://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json
DARK_MATTER_NOLABELShttps://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json
VOYAGER_NOLABELShttps://basemaps.cartocdn.com/gl/voyager-nolabels-gl-style/style.json