Mapbox GL JS

Mapbox GL JS is a JavaScript library for rendering interactive vector maps. It is compatible with Maptoolkit tile styles, so you can use Maptoolkit as a drop-in tile source.

Using Mapbox GL JS requires both a Maptoolkit API key and a Mapbox access token. See Authentication to get your Maptoolkit key, and sign up at mapbox.com for a Mapbox token.

Installation

CDN

<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" />

npm

npm install mapbox-gl

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

Basic setup

Set your Mapbox access token first, then load the Maptoolkit style and hand the object to the map:

const API_KEY = 'YOUR_API_KEY';
mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';

const STYLE_URL = `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`;

// Maptoolkit styles declare `sprite` as an array, which is the MapLibre extension for
// several sprite sheets. Mapbox GL JS only accepts a string and rejects the whole style
// with "sprite: string expected, array found", so collapse it before handing it over.
async function loadStyleForMapbox(url) {
  const style = await fetch(url).then((r) => r.json());
  if (Array.isArray(style.sprite)) style.sprite = style.sprite[0].url;
  return style;
}

loadStyleForMapbox(STYLE_URL).then((style) => {
  const map = new mapboxgl.Map({
    container: 'map',
    style,
    center: [16.37, 48.21],
    zoom: 12,
  });
});

Passing the style URL directly does not work. Mapbox GL JS validates the style on load and rejects sprite as an array with Error: sprite: string expected, array found, leaving a blank map and a getStyle() that throws.

Collapsing the array keeps the first sprite sheet only. Summer, Street, Light and Dark ship one, so nothing is lost. Winter, Hiking and Cycling ship several, and icons from the later sheets cannot be drawn in Mapbox GL JS at all. MapLibre GL JS and Maps JS support the array form natively and need none of this.

Available styles

Style URL	Description
`https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=…`	Outdoor / terrain
`https://styles.maptoolkit.net/maptoolkit/maptoolkit.light.json?api_key=…`	Minimal light
`https://styles.maptoolkit.net/maptoolkit/maptoolkit.dark.json?api_key=…`	Dark mode

Using the Maptoolkit Connector

If you use an AI tool with the Maptoolkit MCP Server, you can generate Mapbox + Maptoolkit code in a single prompt without needing to look up style URLs or tile formats manually.