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 install --save @maptiler/sdk deck.gl

main.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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="robots" content="noindex" />
    <title>How to display a GeoJSON in Deck.gl and MapTiler SDK JS | NPM example</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="map"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
}

#map {
  height: 100vh;
  width: 100vw;
}

<html>

<head>
  <script src="https://unpkg.com/deck.gl@9.2.5/dist.min.js"></script>

  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      height: 100vh;
      width: 100vw;
    }
  </style>
</head>

<body>
  <div id="map"></div>
</body>

<script type="text/javascript">
  maptilersdk.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 maptilersdk.Map({
    container: 'map', // container id
    style: maptilersdk.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 deck.MapboxOverlay({
      interleaved: false,
      layers: [
        new deck.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 deck.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);
  });    
</script>

</html>

Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to secure the key before you publish it.