Deck.gl

deck.gl is a WebGL2-powered data visualization framework designed for high-performance, large-scale geospatial analytics, predominantly used in data science to render and animate millions of data points smoothly 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.

Installation

npm

npm install deck.gl

CDN

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

Add an MVTLayer

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.

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.maptoolkit.url; // TileJSON URL of the vector source

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

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

Every map must show the Maptoolkit logo and the © Maptoolkit © OSM copyright line, both as clickable links. See Quick Start - Add attribution.