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
