Deck.gl

deck.gl is a WebGL2-based data visualization framework for large-scale geospatial analytics. It is mostly used in data science to render and animate millions of data points on top of base maps.

deck.gl renders the Maptoolkit community vector tiles with its MVTLayer, which loads the .pbf vector tiles and draws the features in WebGL. You style the features yourself in deck.gl rather than using the Maptoolkit style sheet. No API key is required.

Basic Setup

MVTLayer takes the vector tile source as its data. The tile endpoint is published in the community style under sources, so read it from the style and pass it to the layer.

npm

npm install @deck.gl/core @deck.gl/geo-layers

Package names are resolved at build time, so these two files need a bundler such as Vite, webpack or Parcel. Saved as a single .html file and opened in a browser, they fail with Failed to resolve module specifier "@deck.gl/core". For a file that runs straight from disk, use the CDN setup below.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      width: 100vw;
      height: 100vh;
    }
    #maptoolkit-attribution img {
      display: block;
      height: 100%;
    }
    #maptoolkit-attribution {
      position: absolute;
      height: 24px;
      bottom: 8px;
      left: 8px;
      z-index: 1000;
    }
    #maptoolkit-copyright {
      position: absolute;
      right: 8px;
      bottom: 8px;
      z-index: 1000;
      font: 11px/1.4 system-ui, sans-serif;
      background: rgba(255, 255, 255, 0.7);
      padding: 2px 6px;
    }
  </style>
  <title>deck.gl</title>
</head>

<body>
<a id="maptoolkit-attribution" href="https://www.maptoolkit.org/" target="_blank" rel="noopener"><img src="https://www.maptoolkit.org/assets/maptoolkit-attribution.png" alt="Maptoolkit"></a>
<div id="maptoolkit-copyright">
  © <a href="https://www.maptoolkit.com/copyright/">Maptoolkit</a>
  © <a href="https://www.openstreetmap.org/copyright">OSM</a>
</div>
<script type="module" src="/src/main.js"></script>
</body>

</html>

src/main.js

import { Deck } from '@deck.gl/core';
import { MVTLayer } from '@deck.gl/geo-layers';

// The community style references its vector tiles in `sources`.
const style = await fetch('https://styles.maptoolkit.org/summer.json').then((r) => r.json());
const tileSource = style.sources.mtk.url; // TileJSON URL of the vector source

new Deck({
  initialViewState: { longitude: 16.37, latitude: 48.21, zoom: 12 },
  controller: true,
  layers: [
    new MVTLayer({
      id: 'maptoolkit',
      data: tileSource,
      stroked: true,
      filled: true,
      getLineColor: [80, 80, 80],
      getFillColor: [220, 220, 220],
      lineWidthMinPixels: 0.5,
    }),
  ],
});

CDN

const { Deck, MVTLayer } = deck;
  fetch('https://styles.maptoolkit.org/summer.json')
    .then((r) => r.json())
    .then((style) => {
      const tileSource = style.sources.mtk.url;
      new Deck({
        initialViewState: { longitude: 16.37, latitude: 48.21, zoom: 12 },
        controller: true,
        layers: [
          new MVTLayer({
            id: 'maptoolkit',
            data: tileSource,
            stroked: true,
            filled: true,
            getLineColor: [80, 80, 80],
            getFillColor: [220, 220, 220],
            lineWidthMinPixels: 0.5,
          }),
        ],
      });
    });

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
  <style>
    body {
      margin: 0;
      width: 100vw;
      height: 100vh;
    }
    #maptoolkit-attribution img {
      display: block;
      height: 100%;
    }
    #maptoolkit-attribution {
      position: absolute;
      height: 24px;
      bottom: 8px;
      left: 8px;
      z-index: 1000;
    }
    #maptoolkit-copyright {
      position: absolute;
      right: 8px;
      bottom: 8px;
      z-index: 1000;
      font: 11px/1.4 system-ui, sans-serif;
      background: rgba(255, 255, 255, 0.7);
      padding: 2px 6px;
    }
  </style>
  <title>deck.gl</title>
</head>

<body>
<a id="maptoolkit-attribution" href="https://www.maptoolkit.org/" target="_blank" rel="noopener"><img src="https://www.maptoolkit.org/assets/maptoolkit-attribution.png" alt="Maptoolkit"></a>
<div id="maptoolkit-copyright">
  © <a href="https://www.maptoolkit.com/copyright/">Maptoolkit</a>
  © <a href="https://www.openstreetmap.org/copyright">OSM</a>
</div>
<script>
  const { Deck, MVTLayer } = deck;
  fetch('https://styles.maptoolkit.org/summer.json')
    .then((r) => r.json())
    .then((style) => {
      const tileSource = style.sources.mtk.url;
      new Deck({
        initialViewState: { longitude: 16.37, latitude: 48.21, zoom: 12 },
        controller: true,
        layers: [
          new MVTLayer({
            id: 'maptoolkit',
            data: tileSource,
            stroked: true,
            filled: true,
            getLineColor: [80, 80, 80],
            getFillColor: [220, 220, 220],
            lineWidthMinPixels: 0.5,
          }),
        ],
      });
    });
</script>
</body>

</html>

MVTLayer gives you the raw geometry per source layer (roads, buildings, water, and so on); use the getFillColor, getLineColor, and getLineWidth accessors, optionally switching on feature.properties, to style each layer.

Attribution

Keep the Maptoolkit logo and the © Maptoolkit © Openstreetmap copyright line visible. deck.gl has no basemap or attribution control of its own, so the example above overlays the official logo image and copyright text directly. See Attribution for the full requirements.