Leaflet

Leaflet is a lightweight library for interactive maps. The community service is vector only, so you render the Maptoolkit vector style in Leaflet through the @maplibre/maplibre-gl-leaflet plugin, which draws a MapLibre GL layer inside a Leaflet map. No API key is required.

Leaflet does not support vector tiles natively, leading to noticeable performance drops. We recommend using MapLibre for smooth, GPU-powered rendering.

Installation

CDN

Load Leaflet, MapLibre GL JS, and the plugin. The plugin adds L.maplibreGL to Leaflet.

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

npm

npm install leaflet maplibre-gl @maplibre/maplibre-gl-leaflet

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'maplibre-gl/dist/maplibre-gl.css';
import '@maplibre/maplibre-gl-leaflet';

Basic setup

Create a Leaflet map, then add the Maptoolkit vector style with L.maplibreGL.

const map = L.map('map').setView([48.21, 16.37], 12);

L.maplibreGL({
  style: 'https://styles.maptoolkit.org/summer.json',
  attribution:
    "© <a href='https://www.maptoolkit.com/copyright/'>Maptoolkit</a> " +
    "© <a href='https://www.openstreetmap.org/copyright'>OSM</a>",
}).addTo(map);

Attribution

The example above sets the required © Maptoolkit © OSM copyright line. You also need the Maptoolkit logo - add it with @maptoolkit/leaflet-logo. See Quick Start - Add attribution.

Examples

See the Examples gallery for markers, popups, and more on the vector basemap.

Notes

This approach renders vector tiles through MapLibre GL, so it requires WebGL. For a vector-native map with smooth zooming and rotation, you can also use MapLibre GL JS directly.