Mapbox GL JS

Mapbox GL JS requires an access token from mapbox.com in addition to your Maptoolkit API key.

Basic Map

mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';

    const map = new mapboxgl.Map({
      container: 'map',
      style: 'https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=YOUR_API_KEY',
      center: [12.805988, 47.310897],
      zoom: 11
    });

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
  <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.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>
    mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';

    const map = new mapboxgl.Map({
      container: 'map',
      style: 'https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=YOUR_API_KEY',
      center: [12.805988, 47.310897],
      zoom: 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 the Mapbox GL JS. Use zoom level 11 and center it around Zell am See. Maptoolkit

MapLibre GL JS OpenLayers