Run your first deck.gl layer
Quick answer
This tutorial sets up deck.gl without React or a bundler, using a canvas element and the standalone deck.gl script. It instantiates Deck with canvas, width, height, initialViewState and controller, then adds a ScatterplotLayer whose getPosition, getRadius and radiusUnits drive the marks. It explains pitch and bearing and corrects the two classic mistakes. Readers end with a working GPU-rendered point map.
Key points
- Provide explicit width and height when initializing Deck with a canvas.
- Return [lng, lat] from getPosition, the opposite order from Leaflet.
- Use radiusUnits: 'pixels' or 'meters' and clamp with radiusMinPixels and radiusMaxPixels.
Example
<canvas id="cv" style="width:100%;height:100%"></canvas>
<script src="https://cdn.jsdelivr.net/npm/deck.gl@9.0.35/dist.min.js"></script>
<script>
var deckgl = new deck.Deck({
canvas: 'cv',
width: '100%',
height: '100%',
initialViewState: {
longitude: 108,
latitude: 34,
zoom: 3.4,
pitch: 35,
bearing: 0,
maxPitch: 65
},
controller: true,
layers: [
new deck.ScatterplotLayer({
data: myPoints,
getPosition: function (d) { return [d.lng, d.lat]; },
getRadius: 2.2,
radiusUnits: 'pixels'
})
]
});
</script>Notes
- A zero-sized canvas renders nothing and produces no console warning.
- Hex strings or CSS colors in getFillColor are ignored; pass 0-255 channel arrays.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Run your first deck.gl layer. https://www.jingweizhi.com/en/deckgl/tutorials/minimal-scene.html (accessed 2026-11-03).