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: 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: false}
  });

  map.addControl(new MaptoolkitLogoControl());
</script>
</body>

</html>

CDN

import * as maplibregl from 'https://cdn.jsdelivr.net/npm/maplibre-gl@6.9.0/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: false}
  });

<!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/maplibre-gl@6.9.0/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/maplibre-gl@6.9.0/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: false}
  });
</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 Attribution for the full requirements.