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

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,
      }),
    ],
  });

<!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 {
      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>
<img id="maptoolkit-attribution" src="https://www.maptoolkit.org/assets/maptoolkit-attribution.png" alt="Maptoolkit">
<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">
  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,
      }),
    ],
  });
</script>
</body>

</html>

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 {
      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>
<img id="maptoolkit-attribution" src="https://www.maptoolkit.org/assets/maptoolkit-attribution.png" alt="Maptoolkit">
<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 Quick Start - Add attribution for the full requirements.