Chevron DownAPI Reference

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({
  mapboxApiAccessToken: '<your_token_here>',
  mapStyle: 'mapbox://styles/mapbox/light-v9',
  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

The scripting API offers out-of-the-box integration with Mapbox. To add a base map to your visualization, you need to include the Mapbox library and stylesheet:

<script src=''></script>
<link href='' rel='stylesheet' />

To disable the base map, simply exclude the mapbox script or set map to false.

map is default to the global variable mapboxgl. 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@~0.44.1/dist/mapbox-gl.js');


new deck.DeckGL({
  map: mapboxgl
mapStyle (Object | String)

The style JSON or URL for the Mapbox map.

mapboxAccessToken (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 Map instance if a base map is present.