OpenLayers

Display Vector Tiles in OpenLayers

OpenLayers reads Maptoolkit styles via the ol-mapbox-style plugin, which translates Mapbox Style JSON into OpenLayers layers.

Basic Map

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

<!DOCTYPE html>
<html>
<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>
  <!-- ol-mapbox-style reads Maptoolkit styles (Mapbox Style JSON) -->
  <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@12/dist/olms.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.8.0/ol.css">
  <style>
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
    #map { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    olms.apply(
      'map',
      'https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=YOUR_API_KEY'
    ).then(map => {
      map.getView().setCenter(ol.proj.fromLonLat([12.805988, 47.310897]));
      map.getView().setZoom(11);
    });
  </script>
</body>
</html>

Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.

Use the Maptoolkit Connector. Create an html file of an interactive map using vector tiles and OpenLayers. Use zoom level 11 and center it around Zell am See. Maptoolkit

3D Terrain

OpenLayers does not support 3D terrain or map pitch.

How it works

OpenLayers does not read Mapbox Style JSON, so this example goes through the ol-mapbox-style plugin. olms.apply() fetches the style, translates every layer into an OpenLayers layer and attaches the result to the container, which is why there is no new ol.Map() call anywhere.

olms.apply() returns a promise, and the map does not exist until it resolves. That is why setCenter and setZoom are inside .then(). Calling them earlier throws.

ol.proj.fromLonLat() is not optional. OpenLayers works in Web Mercator (EPSG:3857) internally while the coordinates you have are longitude and latitude (EPSG:4326). Passing raw degrees puts the view in the Atlantic near Null Island rather than raising an error.

Next steps

The next move is your own data, and in OpenLayers that means its own API rather than the style spec: ol/layer/Vector with ol/source/Vector for GeoJSON, added to the map object that olms.apply() resolves with. The basemap comes from the Maptoolkit style, everything above it is ordinary OpenLayers.

Choosing a style is worth a moment too. The seven in Vector Tiles differ in cartography rather than colour, and the URL takes a language suffix.

Mapbox GL JS