MapMetrics Atlas API Docs

Appearance

Terrain 3D ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://gateway.mapmetrics.org/assets/dist/mapmetrics.css"
    />
    <script src="https://gateway.mapmetrics.org/assets/dist/mapmetrics.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = (window.map = new mapmetricsgl.Map({
        container: "map",
        zoom: 12,
        center: [11.39085, 47.27574],
        pitch: 70,
        hash: true,
        style: {
          version: 8,
          sources: {
            osm: {
              type: "raster",
              tiles: ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
              tileSize: 256,
              attribution: "&copy; OpenStreetMap Contributors",
              maxzoom: 19,
            },
            // Use a different source for terrain and hillshade layers, to improve render quality
            terrainSource: {
              type: "raster-dem",
              url: "https://demotiles.maplibre.org/terrain-tiles/tiles.json",
              tileSize: 256,
            },
            hillshadeSource: {
              type: "raster-dem",
              url: "https://demotiles.maplibre.org/terrain-tiles/tiles.json",
              tileSize: 256,
            },
          },
          layers: [
            {
              id: "osm",
              type: "raster",
              source: "osm",
            },
            {
              id: "hills",
              type: "hillshade",
              source: "hillshadeSource",
              layout: { visibility: "visible" },
              paint: { "hillshade-shadow-color": "#473B24" },
            },
          ],
          terrain: {
            source: "terrainSource",
            exaggeration: 1,
          },
          sky: {},
        },
        maxZoom: 18,
        maxPitch: 85,
      }));

      map.addControl(
        new mapmetricsgl.NavigationControl({
          visualizePitch: true,
          showZoom: true,
          showCompass: true,
        })
      );

      map.addControl(
        new mapmetricsgl.TerrainControl({
          source: "terrainSource",
          exaggeration: 1,
        })
      );
    </script>
  </body>
</html>