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/[email protected]/dist/maplibre-gl.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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

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.