---
title: "How to display a Deck.gl layers in MapTiler SDK JS | Deck gl | JavaScript maps SDK"
description: "Interleave Deck.gl layers with MapTiler SDK JS maps."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# How to display a Deck.gl layers in MapTiler SDK JS
This example shows how to use Deck.gl layers within a MapTiler SDK JS map. The purpose of this demonstration is to exhibit the inclusion of a Deck.gl GeoJSON layer and a Deck.gl arc layer on top of your MapTiler maps. Simply use the code below the map.
In this case, Deck.gl renders within the WebGL context of the underlying base map. This advantageous approach enables occlusion between the Deck.gl layers and the labels and/or 3D features of the base map.
### NPM module setup
```bash
npm install --save @maptiler/sdk deck.gl
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { MapboxOverlay } from '@deck.gl/mapbox';
import { ScatterplotLayer, ArcLayer } from '@deck.gl/layers';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map', // container id
style: MapStyle.STREETS, // style URL
center: [-122.4, 37.79], // starting position [lng, lat]
zoom: 15, // starting zoom
pitch: 60
});
map.on('load', () => {
const firstLabelLayerId = map.getStyle().layers.find(layer => layer.type === 'symbol').id;
const deckOverlay = new MapboxOverlay({
interleaved: true,
layers: [
new ScatterplotLayer({
id: 'deckgl-circle',
data: [
{ position: [-122.402, 37.79], color: [255, 0, 0], radius: 1000 }
],
getPosition: d => d.position,
getFillColor: d => d.color,
getRadius: d => d.radius,
opacity: 0.3,
beforeId: firstLabelLayerId
}),
new ArcLayer({
id: 'deckgl-arc',
data: [
{ source: [-122.3998664, 37.7883697], target: [-122.403068, 37.7930503] }
],
getSourcePosition: d => d.source,
getTargetPosition: d => d.target,
getSourceColor: [255, 0, 128],
getTargetColor: [0, 200, 255],
getWidth: 8
})
]
});
map.addControl(deckOverlay);
});
```
#### index.html
```html
How to display a Deck.gl layers in MapTiler SDK JS | NPM example
```
#### style.css
```css
body {
margin: 0;
padding: 0;
}
#map {
height: 100vh;
width: 100vw;
}
```
### Basic JavaScript setup
```html
```
Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
## Learn more
Check out the Deck.gl documentation [Base Maps Renderers](https://deck.gl/docs/get-started/using-with-map#base-maps-renderers) to learn about the two types of integration between Deck.gl and a base map renderer.
## Related examples
### [GeoJSON in Deck.gl](https://docs.maptiler.com/deck-gl/examples/geojson/)
Examples
Visualize GeoJSON layers and arc connections in Deck.gl.
### [Buildings Deck.gl MVT layer](https://docs.maptiler.com/deck-gl/examples/mvt-extrude/)
Examples
Render extruded building layers in Deck.gl using Vector Tiles.
### [POIs info Deck.gl MVT layer](https://docs.maptiler.com/deck-gl/examples/mvt-tooltip/)
Examples
Display MVT POI layers with tooltips in Deck.gl.
### [3D Terrain](https://docs.maptiler.com/deck-gl/examples/3d-terrain/)
Examples
Display realistic 3D terrain in Deck.gl using MapTiler.