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

Package names and the CSS import are resolved at build time, so these two files need a bundler such as Vite, webpack or Parcel. Saved as a single .html file and opened in a browser, they fail with Failed to resolve module specifier "ol/ol.css". For a file that runs straight from disk, use the CDN setup below.

index.html

<!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 img {
      display: block;
      height: 100%;
    }
    #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>
<a id="maptoolkit-attribution" href="https://www.maptoolkit.org/" target="_blank" rel="noopener"><img src="https://www.maptoolkit.org/assets/maptoolkit-attribution.png" alt="Maptoolkit"></a>
<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" src="/src/main.js"></script>
</body>

</html>

src/main.js

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

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/ol@v10.8.0/dist/ol.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.8.0/ol.css">
  <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@13.4.1/dist/olms.js"></script>
  <style>
    body {
      margin: 0;
    }
    #map {
      height: 100vh;
    }
    #maptoolkit-attribution img {
      display: block;
      height: 100%;
    }
    #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>
<a id="maptoolkit-attribution" href="https://www.maptoolkit.org/" target="_blank" rel="noopener"><img src="https://www.maptoolkit.org/assets/maptoolkit-attribution.png" alt="Maptoolkit"></a>
<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 Attribution for the full requirements.