How to display a MVT layer of buildings in Deck.gl

This Deck.gl example demonstrates how to load a Vector Tiles layer. The specific layer showcased in this example is the building layer, which is sourced from the MapTiler Planet tileset. Simply use the code below the map.

In this scenario, the buildings within the layer are visually represented based on the color specified in the colour field, as well as their respective heights indicated in the render_height field.

^{Hold down the shift key to rotate the map}


npm install --save @maptiler/sdk deck.gl chroma-js

main.js

import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { MapboxOverlay } from '@deck.gl/mapbox';
import { MVTLayer } from '@deck.gl/layers';
import chroma from 'chroma-js';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';

const map = new Map({
  container: 'map', // container id
  style: MapStyle.BASE, // style URL
  center: [-74.0115, 40.7082], // starting position [lng, lat]
  zoom: 14.5, // starting zoom
  pitch: 60
});

map.on('load', () => {
  const deckOverlay = new MapboxOverlay({
    interleaved: false,
    layers: [
      new MVTLayer({
        data: `https://api.maptiler.com/tiles/buildings/{z}/{x}/{y}.pbf?key=${config.apiKey}`,
        loadOptions: {
          mvt: {
            layers: ['building']
          }
        },
        minZoom: 0,
        maxZoom: 15,
        getLineColor: f => {
          return f.properties.facade_color && chroma.valid(f.properties.facade_color) ? chroma(f.properties.facade_color).rgb() : [140, 170, 180]
        },
        getFillColor: f => {
          return f.properties.facade_color && chroma.valid(f.properties.facade_color) ? chroma(f.properties.facade_color).rgb() : [140, 170, 180]
        },
        getLineWidth: 1,
        lineWidthMinPixels: 1,
        getElevation: f => {
          return f.properties.height ? f.properties.height : 0
        },
        extruded: true,
        wireframe: true
      })
    ]
  });

  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 MVT layer of buildings in Deck.gl | 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" />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js"
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <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 map = new maptilersdk.Map({
    container: 'map', // container id
    style: maptilersdk.MapStyle.BASE, // style URL
    center: [-74.0115, 40.7082], // starting position [lng, lat]
    zoom: 14.5, // starting zoom
    pitch: 60
  });

  map.on('load', () => {
    const deckOverlay = new deck.MapboxOverlay({
      interleaved: false,
      layers: [
        new deck.MVTLayer({
          data: `https://api.maptiler.com/tiles/buildings/{z}/{x}/{y}.pbf?key=${maptilersdk.config.apiKey}`,
          loadOptions: {
            mvt: {
              layers: ['building']
            }
          },
          minZoom: 0,
          maxZoom: 15,
          getLineColor: f => {
            return f.properties.facade_color && chroma.valid(f.properties.facade_color) ? chroma(f.properties.facade_color).rgb() : [140, 170, 180]
          },
          getFillColor: f => {
            return f.properties.facade_color && chroma.valid(f.properties.facade_color) ? chroma(f.properties.facade_color).rgb() : [140, 170, 180]
          },
          getLineWidth: 1,
          lineWidthMinPixels: 1,
          getElevation: f => {
            return f.properties.height ? f.properties.height : 0
          },
          extruded: true,
          wireframe: true
        })
      ]
    });

    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.