Mapbox GL JS

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

Map with 3D Terrain

Adds a 3D terrain effect using the Terrain RGB tileset. Set pitch to tilt the map, then add the terrain source and call setTerrain:

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: 12,
      pitch: 65,
    });

    map.on('load', () => {
      map.addSource('terrain', {
        type: 'raster-dem',
        tiles: ['https://vtc-cdn.maptoolkit.net/terrain/{z}/{x}/{y}.webp?api_key=YOUR_API_KEY'],
        tileSize: 256,
        maxzoom: 12,
        minzoom: 5,
        encoding: 'terrarium'
      });

      map.setTerrain({ source: 'terrain' });
    });

    map.addControl(new mapboxgl.NavigationControl({ visualizePitch: true }));

<!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: 12,
      pitch: 65,
    });

    map.on('load', () => {
      map.addSource('terrain', {
        type: 'raster-dem',
        tiles: ['https://vtc-cdn.maptoolkit.net/terrain/{z}/{x}/{y}.webp?api_key=YOUR_API_KEY'],
        tileSize: 256,
        maxzoom: 12,
        minzoom: 5,
        encoding: 'terrarium'
      });

      map.setTerrain({ source: 'terrain' });
    });

    map.addControl(new mapboxgl.NavigationControl({ visualizePitch: true }));
  </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, center it around Zell am See, and add 3d terrain. The default view should display 3d terrain. Maptoolkit

MapLibre GL JS OpenLayers