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/[email protected]/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/[email protected]/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.

Mapbox GL JS