OpenLayers

OpenLayers is a full-featured open-source mapping library. The community service is vector only, so you render the Maptoolkit vector style in OpenLayers through the ol-mapbox-style plugin, which reads the style JSON and translates it into OpenLayers layers. No API key is required.

Although OpenLayers supports vector tiles natively, it lacks the hardware-accelerated rendering of MapLibre. For smooth 60-FPS map interactions, we recommend MapLibre.

Basic Setup

npm

npm install ol ol-mapbox-style

import 'ol/ol.css';
  import Map from 'ol/Map.js';
  import View from 'ol/View.js';
  import { fromLonLat } from 'ol/proj.js';
  import { apply } from 'ol-mapbox-style';
  import { Attribution } from 'ol/control.js';
  const map = new Map({
    target: 'map',
    view: new View({
      center: fromLonLat([16.37, 48.21]),
      zoom: 12,
    }),
  });
  apply(map, 'https://styles.maptoolkit.org/summer.json').then((map) => {
    map.getControls().getArray()
      .filter((control) => control instanceof Attribution)
      .forEach((control) => map.removeControl(control));
  });

<!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;
    }
    #maptoolkit-attribution {
      position: absolute;
      height: 24px;
      bottom: 8px;
      left: 8px;
      z-index: 1000;
    }
    #maptoolkit-copyright {
      position: absolute;
      right: 8px;
      bottom: 8px;
      z-index: 1000;
      font: 11px/1.4 system-ui, sans-serif;
      background: rgba(255, 255, 255, 0.7);
      padding: 2px 6px;
    }
  </style>
  <title>OpenLayers</title>
</head>

<body>
<div id="map"></div>
<img id="maptoolkit-attribution" src="https://www.maptoolkit.org/assets/maptoolkit-attribution.png" alt="Maptoolkit">
<div id="maptoolkit-copyright">
  © <a href="https://www.maptoolkit.com/copyright/">Maptoolkit</a>
  © <a href="https://www.openstreetmap.org/copyright">OSM</a>
</div>
<script type="module">
  import 'ol/ol.css';
  import Map from 'ol/Map.js';
  import View from 'ol/View.js';
  import { fromLonLat } from 'ol/proj.js';
  import { apply } from 'ol-mapbox-style';
  import { Attribution } from 'ol/control.js';
  const map = new Map({
    target: 'map',
    view: new View({
      center: fromLonLat([16.37, 48.21]),
      zoom: 12,
    }),
  });
  apply(map, 'https://styles.maptoolkit.org/summer.json').then((map) => {
    map.getControls().getArray()
      .filter((control) => control instanceof Attribution)
      .forEach((control) => map.removeControl(control));
  });
</script>
</body>

</html>

CDN

var map = new ol.Map({
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([16.37, 48.21]),
      zoom: 12,
    }),
  });
  olms.apply(map, 'https://styles.maptoolkit.org/summer.json').then(function (map) {
    map.getControls().forEach(function (control) {
      if (control instanceof ol.control.Attribution) {
        map.removeControl(control);
      }
    });
  });

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/olms.js"></script>
  <style>
    body {
      margin: 0;
    }
    #map {
      height: 100vh;
    }
    #maptoolkit-attribution {
      position: absolute;
      height: 24px;
      bottom: 8px;
      left: 8px;
      z-index: 1000;
    }
    #maptoolkit-copyright {
      position: absolute;
      right: 8px;
      bottom: 8px;
      z-index: 1000;
      font: 11px/1.4 system-ui, sans-serif;
      background: rgba(255, 255, 255, 0.7);
      padding: 2px 6px;
    }
  </style>
  <title>OpenLayers</title>
</head>

<body>
<div id="map"></div>
<img id="maptoolkit-attribution" src="https://www.maptoolkit.org/assets/maptoolkit-attribution.png" alt="Maptoolkit">
<div id="maptoolkit-copyright">
  © <a href="https://www.maptoolkit.com/copyright/">Maptoolkit</a>
  © <a href="https://www.openstreetmap.org/copyright">OSM</a>
</div>
<script>
  var map = new ol.Map({
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([16.37, 48.21]),
      zoom: 12,
    }),
  });
  olms.apply(map, 'https://styles.maptoolkit.org/summer.json').then(function (map) {
    map.getControls().forEach(function (control) {
      if (control instanceof ol.control.Attribution) {
        map.removeControl(control);
      }
    });
  });
</script>
</body>

</html>

Examples

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

Attribution

Keep the Maptoolkit logo and the © Maptoolkit © Openstreetmap copyright line visible. There is no official OpenLayers logo package yet, so the example above overlays the official logo image and copyright text directly, and removes OpenLayers’ default attribution control (which would otherwise only show the OpenStreetMap data attribution from the style, not the required Maptoolkit line). See Quick Start - Add attribution for the full requirements.