Skip to main content

DeckGL (Scripting Interface)

DeckGL extends the core Deck class with some additional features such as Mapbox integration. It offers a convenient way to use in prototype environments such as Codepen, JSFiddle and Observable.

Make sure to read the Using Scripting API article.


new deck.DeckGL({
mapStyle: '',
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


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 should append its canvas. Can be either a HTMLDivElement or the element id. The 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=""></script>
<link href="" rel="stylesheet" />
<!-- or -->
<script src=""></script>
<link href="" 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');


new deck.DeckGL({
map: mapboxgl // or maplibregl

mapStyle (object | String)

The style JSON or URL for the Mapbox map.

mapboxApiAccessToken (string)

The API access token to use Mapbox tiles. See Mapbox GL JS documentation for how to use Mapbox.


All Deck class methods, with these additional methods:


Returns the mapbox-gl or maplibre-gl Map instance if a base map is present.