MapMetrics Atlas API Docs

Appearance

Add a Heatmap ​

​

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link
      href="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.css"
      rel="stylesheet"
    />
    <script src="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.js"></script>
   
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      #map {
        min-height: 500px;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const accessToken = "<YOUR_ACCESS_TOKEN>";

      const map = new mapmetricsgl.Map({
        container: "map",
        style: `${accessToken}`,
        center: [-120, 50],
        zoom: 2,
      }).addControl(new mapmetricsgl.NavigationControl(), "top-right");

 

      map.on("load", () => {
        mapmetricsgl.setRTLTextPlugin(
          "https://gateway.mapmetrics.org/assets/js/mapmetrics-gl-rtl-text.min.js"
        );

        // Add a geojson point source.
        map.addSource("earthquakes", {
          type: "geojson",
          data: "https://gateway.mapmetrics.org/assets/earthquakes.geojson",
        });

        // Add the heatmap layer
        map.addLayer(
          {
            id: "earthquakes-heat",
            type: "heatmap",
            source: "earthquakes",
            maxzoom: 9,
            paint: {
              "heatmap-weight": [
                "interpolate",
                ["linear"],
                ["get", "mag"],
                0,
                0,
                6,
                1,
              ],
              "heatmap-intensity": 1, // Simplified for debugging
              "heatmap-color": [
                "interpolate",
                ["linear"],
                ["heatmap-density"],
                0,
                "rgba(33,102,172,0)",
                0.2,
                "rgb(103,169,207)",
                0.4,
                "rgb(209,229,240)",
                0.6,
                "rgb(253, 199, 199)",
                0.8,
                "rgb(239, 98, 98)",
                1,
                "rgb(178, 24, 24)",
              ],
              "heatmap-radius": [
                "interpolate",
                ["linear"],
                ["zoom"],
                0,
                2,
                9,
                20,
              ],
              "heatmap-opacity": 1, // Set to 1 for better visibility
            },
          },
          map.getStyle().layers[map.getStyle().layers.length - 1].id // Add after all layers
        );

        // Add the point layer for earthquakes
        map.addLayer(
          {
            id: "earthquakes-point",
            type: "circle",
            source: "earthquakes",
            minzoom: 7,
            paint: {
              "circle-radius": [
                "interpolate",
                ["linear"],
                ["zoom"],
                7,
                ["interpolate", ["linear"], ["get", "mag"], 1, 1, 6, 4],
                16,
                ["interpolate", ["linear"], ["get", "mag"], 1, 5, 6, 50],
              ],
              "circle-color": [
                "interpolate",
                ["linear"],
                ["get", "mag"],
                1,
                "rgba(33,102,172,0)",
                2,
                "rgb(103,169,207)",
                3,
                "rgb(209,229,240)",
                4,
                "rgb(251, 199, 199)",
                5,
                "rgb(239, 98, 98)",
                6,
                "rgb(234, 43, 43)",
              ],
              "circle-stroke-color": "white",
              "circle-stroke-width": 1,
              "circle-opacity": [
                "interpolate",
                ["linear"],
                ["zoom"],
                7,
                0,
                8,
                1,
              ],
            },
          },
          map.getStyle().layers[map.getStyle().layers.length - 1].id // Add after all layers
        );
      });
    </script>
  </body>
</html>