---
title: "Create deck.gl layer using REST API | Deck gl | JavaScript maps SDK"
description: "Create Deck.gl layers from REST API overlays using SDK."
---
> 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.
# Create deck.gl layer using REST API
This example shows how to create a deck.gl layer as an overlay from a REST API using MapTiler SDK JS.
### 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 { ScatterplotLayer, MapboxOverlay } from 'deck.gl';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map',
style: MapStyle.DATAVIZ.LIGHT,
center: [2.345885, 48.860412],
zoom: 12,
});
// 20 + 1 random colors for all the districts of Paris and outside of the districts
const colorPalette = [
[255, 102, 51],
[255, 179, 153],
[255, 51, 255],
[255, 255, 153],
[0, 179, 230],
[230, 179, 51],
[51, 102, 230],
[153, 153, 102],
[153, 255, 153],
[179, 77, 77],
[128, 179, 0],
[128, 153, 0],
[230, 179, 179],
[102, 128, 179],
[102, 153, 26],
[255, 153, 230],
[204, 255, 26],
[255, 26, 102],
[230, 51, 26],
[51, 255, 204],
[102, 153, 77],
];
const limit = 100;
// Sample data source = https://data.iledefrance.fr
const parisSights = `https://data.iledefrance.fr/api/explore/v2.1/catalog/datasets/principaux-sites-touristiques-en-ile-de-france0/records?limit=${limit}`;
let layerControl;
// Add the overlay as a control
map.on('load', async () => {
// Fetch the data
const response = await fetch(parisSights);
const responseJSON = await response.json();
const layer = new ScatterplotLayer({
id: 'scatterplot-layer',
data: responseJSON.results,
pickable: true,
autoHighlight: true,
opacity: 0.7,
stroked: true,
filled: true,
radiusMinPixels: 14,
radiusMaxPixels: 100,
lineWidthMinPixels: 5,
// Using appropriate fields for coordinates from the dataset
getPosition: (d) => [d.geo_point_2d.lon, d.geo_point_2d.lat],
getFillColor: (d) => {
// Filtering by postal code
if ('insee' in d && d.insee.startsWith('75')) {
// Districts in Paris
return colorPalette[parseInt(d.insee.substring(3))];
} else {
// Out of Paris
return colorPalette[20];
}
},
getLineColor: (d) => [14, 16, 255],
onClick: (info) => {
const { coordinate, object } = info;
const description = `
${object.nom_carto || 'Unknown'}
`;
new maptilersdk.Popup()
.setLngLat(coordinate)
.setHTML(description)
.addTo(map);
},
});
// Create the overlay
const overlay = new MapboxOverlay({
layers: [layer],
});
map.addControl(overlay);
});
```
#### index.html
```html
Create deck.gl layer using REST API | NPM example
```
#### style.css
```css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
/* Deck.gl layer is added as an overlay, popup needs to be displayed over it */
.maplibregl-popup {
z-index: 2;
}
```
### Basic JavaScript setup
```html
Create deck.gl layer using REST API
```
## Learn more
Check out [Deck.gl with MapTiler maps](https://docs.maptiler.com/deck-gl/) for more examples of integrating Deck.gl layers into MapTiler maps.
## Related examples
### [Toggle deck.gl layer](https://docs.maptiler.com/deck-gl/examples/toogle-deck-gl-layer/)
Examples
Toggle visibility of Deck.gl layers using MapTiler SDK.
### [GeoJSON point layer](https://docs.maptiler.com/sdk-js/examples/geojson-point/)
Tutorials
Add a GeoJSON point overlay to your map application.
### [Point layer (point helper)](https://docs.maptiler.com/sdk-js/examples/helper-point-minimal/)
Examples
Add minimal point layer using MapTiler point helper.
### [View local GeoJSON](https://docs.maptiler.com/sdk-js/examples/local-geojson/)
Examples
View local GeoJSON without server upload.
0..