MapLibre GL JS

MapLibre GL JS is an open-source JavaScript library for rendering interactive vector maps in the browser. It uses WebGL to render maps from vector tile sources - including Maptoolkit’s vector and terrain tiles.

You’ll need a Maptoolkit API key to use the tile endpoints - see Authentication to get one.

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@5.6.1/dist/maplibre-gl.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.6.1/dist/maplibre-gl.css" />

npm

npm install maplibre-gl

import * as maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

Basic setup

Pass the Maptoolkit style URL directly as the style parameter. Your API key goes in the query string:

const map = new maplibregl.Map({
  container: 'map',
  attributionControl: { compact: false },
  style: 'https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=YOUR_API_KEY',
  center: [16.37, 48.21],
  zoom: 12,
});

Available styles

All seven styles take the same URL shape, with the variant name in the middle:

Style URL	Description
`https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=…`	Outdoor and terrain, the default
`https://styles.maptoolkit.net/maptoolkit/maptoolkit.winter.json?api_key=…`	Winter, with pistes and lifts
`https://styles.maptoolkit.net/maptoolkit/maptoolkit.hiking.json?api_key=…`	Hiking, with trail difficulty grades
`https://styles.maptoolkit.net/maptoolkit/maptoolkit.cycling.json?api_key=…`	Cycling, with routes and node networks
`https://styles.maptoolkit.net/maptoolkit/maptoolkit.street.json?api_key=…`	Detailed street map
`https://styles.maptoolkit.net/maptoolkit/maptoolkit.light.json?api_key=…`	Minimal light
`https://styles.maptoolkit.net/maptoolkit/maptoolkit.dark.json?api_key=…`	Dark, high contrast

Plugins

Maptoolkit publishes open-source controls for MapLibre GL JS. Each one is an npm package you add with map.addControl():

Plugin	What it does
Style Control	Lets users switch between map styles from a thumbnail panel.
Logo Control	Adds the Maptoolkit logo to the map.
Isochrone Control	Lets users drag a marker onto the map and shows how far they can travel in a given time.
Legend Control	Shows a legend of the map features currently in view.

See Our MapLibre Plugins for all plugins and how to use them without a bundler.

Using the Maptoolkit Connector

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