Skip to content

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 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',
  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 URLDescription
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

Add a Style Switcher covers @maptoolkit/maplibre-style-control, a MapLibre control that lets users pick between these styles from a thumbnail panel.

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.