using-standalone.md

Using deck.gl without React

The deck.gl core library and layers have no dependencies on React or Mapbox GL and can be used by any JavaScript application.

Our get-started examples contains vanilla JavaScript templates that serve as a starting point for your application.

Using @deck.gl/core

@deck.gl/core is a submodule of deck.gl that contains no React dependency.

The Deck class takes deck.gl layer instances and viewport parameters, and renders those layers as a transparent overlay.

npm install @deck.gl/core @deck.gl/layers

import {Deck} from '@deck.gl/core';
import {ScatterplotLayer} from '@deck.gl/layers';

const INITIAL_VIEW_STATE = {
  latitude: 37.8,
  longitude: -122.45,
  zoom: 15
};

const deckgl = new Deck({
  initialViewState: INITIAL_VIEW_STATE,
  controller: true,
  layers: [
    new ScatterplotLayer({
      data: [
        {position: [-122.45, 37.8], color: [255, 0, 0], radius: 100}
      ],
      getColor: d => d.color,
      getRadius: d => d.radius
    })
  ]
});

Using the Scripting API

deck.gl also offers a standalone bundled version of the library - a native JavaScript scripting interface like that of d3.js. You can now use deck.gl in prototype environments such as Codepen, JSFiddle and Observable. This effort aims to make it easier for designers, creative coders and data scientists everywhere to leverage WebGL for interactive visualizations.

To use deck.gl in a scripting environment, include the standalone version in a script tag:

<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<!-- optional if mapbox base map is needed -->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />

It exposes two global objects deck and luma. Any exports from the deck.gl core can be accessed by deck.<Class>.

The scripting API's DeckGL class extends the core Deck class with some additional features such as Mapbox integration.

new deck.DeckGL({
  mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
  initialViewState: {
    longitude: -122.45,
    latitude: 37.8,
    zoom: 15
  },
  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
    })
  ]
});

Check our codepen showcase and observable profile for examples.