Skip to content

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 pass the Maptoolkit style URL as the style parameter:

mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=YOUR_API_KEY',
  center: [16.37, 48.21],
  zoom: 12,
});

Available styles

Style URLDescription
https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=…Outdoor / terrain
https://static.maptoolkit.net/styles/toursprung/light.json?api_key=…Minimal light
https://static.maptoolkit.net/styles/toursprung/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.