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 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.

Source

modules/main/bundle.ts