DeckGL (Scripting Interface)
DeckGL extends the core Deck class with some additional features such as Mapbox integration. It offers a convenient way to use deck.gl in prototype environments such as Codepen, JSFiddle and Observable.
Make sure to read the Using deck.gl Scripting API article.
Usage
new deck.DeckGL({
mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
initialViewState: {
longitude: -122.45,
latitude: 37.8,
zoom: 12
},
controller: true,
layers: [
new deck.ScatterplotLayer({
data: [
{position: [-122.45, 37.8], color: [255, 0, 0], radius: 100}
],
getColor: d => d.color,
getRadius: d => d.radius
})
]
});
Properties
All Deck class properties, with these additional props that can be passed to the constructor:
container (DOMElement | String, optional)
Default: document.body
The container in which deck.gl should append its canvas. Can be either a HTMLDivElement or the element id. The deck.gl canvas is resized to fill the container.
map (object, optional)
Default: window.mapboxgl || window.maplibregl
The scripting API offers out-of-the-box integration with Mapbox GL JS or MapLibre GL JS. To add a base map to your visualization, you need to include the base map library and stylesheet:
<script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet" />
<!-- or -->
<script src="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.css" rel="stylesheet" />
The above script adds mapboxgl or maplibregl to the global scope, which will be picked up by default.
To disable the base map, simply exclude the mapbox script or set map to false.
In some environments such as Observable, libraries cannot be imported into the global scope, in which case you need to manually pass the mapboxgl object to map:
mapboxgl = require('mapbox-gl@^3.0.0/dist/mapbox-gl.js');
// or
maplibregl = require('maplibre-gl@^3.0.0/dist/maplibre-gl.js');
And
new deck.DeckGL({
...
map: mapboxgl // or maplibregl
});
mapStyle (object | string, optional)
The style JSON or URL for the Mapbox map.
mapboxApiAccessToken (string, optional)
The API access token to use Mapbox tiles. See Mapbox GL JS documentation for how to use Mapbox.
mapOptions (object, optional)
Additional options to pass to the mapboxgl.Map or maplibregl.Map constructor.
Methods
All Deck class methods, with these additional methods:
getMapboxMap
Returns the mapbox-gl or maplibre-gl Map instance if a base map is present.