---
title: "How to display a GeoJSON in Deck.gl and MapTiler SDK JS | Deck gl | JavaScript maps SDK"
description: "Visualize GeoJSON layers and arc connections in Deck.gl."
---
> 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 GeoJSON in Deck.gl and MapTiler SDK JS
This example illustrates the process of showcasing a GeoJSON layer in Deck.gl. In this particular instance, we utilize an arc layer to visually represent the connections between the various features of the GeoJSON layer. Simply implement the provided code beneath the map to achieve this visualization.
Hold down the shift key to rotate the 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 { ArcLayer, GeoJsonLayer } from '@deck.gl/layers';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const AIR_PORTS = 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';
const map = new Map({
container: 'map', // container id
style: MapStyle.STREETS, // style URL
enter: [10.45, 20.47], // starting position [lng, lat]
zoom: 0.5, // starting zoom
pitch: 30
});
map.on('load', () => {
const deckOverlay = new MapboxOverlay({
interleaved: false,
layers: [
new GeoJsonLayer({
id: 'airports',
data: AIR_PORTS,
// Styles
filled: true,
pointRadiusMinPixels: 2,
pointRadiusScale: 2000,
getPointRadius: f => 11 - f.properties.scalerank,
getFillColor: [200, 0, 80, 180],
// Interactive props
pickable: true,
autoHighlight: true,
onClick: info =>
// eslint-disable-next-line
info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`)
}),
new ArcLayer({
id: 'arcs',
data: AIR_PORTS,
dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
// Styles
getSourcePosition: f => [-0.4531566, 51.4709959], // London
getTargetPosition: f => f.geometry.coordinates,
getSourceColor: [0, 128, 200],
getTargetColor: [200, 0, 80],
getWidth: 1
})
]
});
map.addControl(deckOverlay);
});
```
#### index.html
```html
How to display a GeoJSON in Deck.gl and 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.
## Related examples
### [Interleaved Deck.gl layer](https://docs.maptiler.com/deck-gl/examples/interleaved/)
Examples
Interleave Deck.gl layers with MapTiler SDK JS maps.
### [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.