OpenLayers

OpenLayers is an open-source JavaScript mapping library. It supports Maptoolkit vector tile styles via the ol-mapbox-style plugin, which reads Mapbox Style JSON and translates it into OpenLayers layers.

You’ll need a Maptoolkit API key to use the tile endpoints - see Authentication to get one.

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@12/dist/olms.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" />

npm

npm install ol ol-mapbox-style

import { apply } from 'ol-mapbox-style';

Basic setup

Use olms.apply() (CDN) or the apply() function (npm) to load a Maptoolkit style directly into an OpenLayers map:

CDN

olms.apply(
  'map',
  'https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=YOUR_API_KEY'
).then(map => {
  map.getView().setCenter(ol.proj.fromLonLat([16.37, 48.21]));
  map.getView().setZoom(12);
});

npm

import { apply } from 'ol-mapbox-style';
import { fromLonLat } from 'ol/proj';

apply(
  'map',
  'https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=YOUR_API_KEY'
).then(map => {
  map.getView().setCenter(fromLonLat([16.37, 48.21]));
  map.getView().setZoom(12);
});

Limitations

OpenLayers does not support 3D terrain or map pitch. For 3D terrain, use MapLibre GL JS or Maptoolkit Maps JS instead.