MapLibre GL JS

MapLibre GL JS renders interactive vector maps in the browser using WebGL. It loads the Maptoolkit community style URL directly, with no API key.

MapLibre is the JavaScript library that we recommend for vector tiles, offering best-in-class performance. Minimum required version: v5.6.0.

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 community style URL as the style option.

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://styles.maptoolkit.org/summer.json',
  center: [16.37, 48.21],
  zoom: 12,
});

Live example

const map = new maplibregl.Map({
      container: 'map',
      style: 'https://styles.maptoolkit.org/summer.json',
      center: [16.37, 48.21],
      zoom: 12
    });

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
  <style>
    body { margin: 0; }
    #map { width: 100%; height: 400px; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.js"></script>
  <script>
    const map = new maplibregl.Map({
      container: 'map',
      style: 'https://styles.maptoolkit.org/summer.json',
      center: [16.37, 48.21],
      zoom: 12
    });
  </script>
</body>
</html>

Examples

See the Examples gallery for ready-to-run snippets covering markers, popups, GeoJSON data, layer styling, camera animation, and more.

Attribution

Add the Maptoolkit logo with @maptoolkit/maplibre-gl-logo and keep the © Maptoolkit © OSM copyright line visible. See Quick Start - Add attribution for the full requirements.