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.
@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
})
]
});
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.