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: v6.0.0.

Basic setup

npm

npm install maplibre-gl
npm install @maptoolkit/maplibre-gl-logo

import maplibregl from 'maplibre-gl';
  import 'maplibre-gl/dist/maplibre-gl.css';
  import {MaptoolkitLogoControl} from '@maptoolkit/maplibre-gl-logo';
  const map = new maplibregl.Map({
    container: 'map',
    style: 'https://styles.maptoolkit.org/summer.json',
    center: [16.37, 48.21],
    zoom: 12,
    attributionControl: {compact: true}
  });

  // Arabic/Hebrew: MapLibre has no right-to-left support built in, this plugin adds it
  maplibregl.setRTLTextPlugin('https://cdn.jsdelivr.net/npm/@mapbox/[email protected]/dist/mapbox-gl-rtl-text.js', false);
  map.addControl(new MaptoolkitLogoControl());

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
    }
    #map {
      height: 100vh;
    }
  </style>
  <title>MapLibre GL JS</title>
</head>

<body>
<div id="map"></div>
<script type="module">
  import maplibregl from 'maplibre-gl';
  import 'maplibre-gl/dist/maplibre-gl.css';
  import {MaptoolkitLogoControl} from '@maptoolkit/maplibre-gl-logo';
  const map = new maplibregl.Map({
    container: 'map',
    style: 'https://styles.maptoolkit.org/summer.json',
    center: [16.37, 48.21],
    zoom: 12,
    attributionControl: {compact: true}
  });

  // Arabic/Hebrew: MapLibre has no right-to-left support built in, this plugin adds it
  maplibregl.setRTLTextPlugin('https://cdn.jsdelivr.net/npm/@mapbox/[email protected]/dist/mapbox-gl-rtl-text.js', false);
  map.addControl(new MaptoolkitLogoControl());
</script>
</body>

</html>

CDN

import * as maplibregl from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.mjs';

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.css">
  <style>
    body {
      margin: 0;
    }
    #map {
      height: 100vh;
    }
    #maptoolkit-attribution {
      position: absolute;
      height: 24px;
      bottom: 8px;
      left: 8px;
    }
  </style>
  <title>MapLibre GL JS</title>
</head>

<body>
<div id="map"></div>
<img id="maptoolkit-attribution" src="https://www.maptoolkit.org/assets/maptoolkit-attribution.png" alt="Maptoolkit">
<script type="module">
  import * as maplibregl from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.mjs';

  const map = new maplibregl.Map({
    container: 'map',
    style: 'https://styles.maptoolkit.org/summer.json',
    center: [16.37, 48.21],
    zoom: 12,
    attributionControl: {compact: true}
  });
</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

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