MapLibre GL JS

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:

const map = new maplibregl.Map({
      container: 'map',
      style: 'https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.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 maplibregl.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://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.css" />
  <style>
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
    #map { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <div id="map" class="map"></div>
  <script>
    const map = new maplibregl.Map({
      container: 'map',
      style: 'https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.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 maplibregl.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 MapLibre GL JS. Use zoom level 11, center it around Zell am See, and add 3d terrain. The default view should display 3d terrain. Maptoolkit

Maptoolkit Maps JS Mapbox GL JS