Visualize points in a scene with a heatmap | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample demonstrates how to construct a HeatmapRenderer in a scene for visualizing large, dense point datasets. The HeatmapRenderer visualizes points as a raster surface that is draped on the terrain and where strong colors indicate areas with a high density of points. Areas with weak or no colors indicate places that don’t have many points.

Knowledge of how the heatmap is implemented is crucial for understanding how to construct the renderer. Each pixel in the view has a density value depending on its proximity to one or more points. If a field is specified, then the density value is multiplied by the field value.

The heatmap is constructed by passing a set of colorStops to the renderer. These map a specific color to a ratio value. The ratio represents the ratio of the pixel’s density value to the maxDensity of the renderer. Therefore, the lower the maxDensity, the hotter the map will look.

Additionally, you can add a referenceScale to fix the radius to a certain scale, so that it remains constant in real world size.

const heatmapRenderer = {
  type: "heatmap", // autocasts as new HeatmapRenderer()
  colorStops: [
    { ratio: 0 / 6, color: "rgba(25, 43, 51, 0.6)" },
    { ratio: 1 / 6, color: "rgba(30, 140, 160, 1)" },
    { ratio: 2 / 6, color: "rgba(64, 184, 156, 1)" },
    { ratio: 3 / 6, color: "rgba(73, 214, 181, 1)" },
    { ratio: 4 / 6, color: "rgba(83, 245, 207, 1)" },
    { ratio: 5 / 6, color: "rgba(102, 255, 219, 1)" },
    { ratio: 6 / 6, color: "rgba(158, 255, 233, 1)" },
  ],
  maxDensity: 0.0045,
  minDensity: 0,
  radius: 35,
  referenceScale: 13000,
};

const layer = new FeatureLayer({
  url: "https://services2.arcgis.com/jUpNdisbWqRpMo35/arcgis/rest/services/Verkehrsunf%C3%A4lle_2019/FeatureServer",
  opacity: 0.75,
  renderer: heatmapRenderer,
});

See the HeatmapRenderer documentation for more specifics of this implementation.

Intro to heatmap

Create a scale-dependent visualization

Create a static heatmap

Heatmap

HeatmapRenderer

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Visualize points in a scene with a heatmap | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #toggleModeButton {
        position: absolute;
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>

  <body>
    <arcgis-scene basemap="satellite" ground="world-elevation">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"> </arcgis-compass>
      <arcgis-legend slot="bottom-left"></arcgis-legend>
    </arcgis-scene>
    <calcite-button appearance="outline-fill" color="blue" id="toggleModeButton"
      >Static reference scale</calcite-button
    >

    <script type="module">
      const [IntegratedMeshLayer, FeatureLayer, HeatmapRenderer] = await $arcgis.import([
        "@arcgis/core/layers/IntegratedMeshLayer.js",
        "@arcgis/core/layers/FeatureLayer.js",
        "@arcgis/core/renderers/HeatmapRenderer.js",
      ]);

      /*****************************************************************
       * Get a reference to the HTML elements
       *****************************************************************/
      const viewElement = document.querySelector("arcgis-scene");
      const legend = document.querySelector("arcgis-legend");
      const toggleModeButton = document.getElementById("toggleModeButton");

      /*****************************************************************
       * Create the mesh layer with the city
       *****************************************************************/
      const meshLayer = new IntegratedMeshLayer({
        url: "https://tiles-eu1.arcgis.com/7cCya5lpv5CmFJHv/arcgis/rest/services/Munich_3D_Mesh_City_Mapper_2_SURE_43/SceneServer",
      });

      /*****************************************************************
       * Prepare the heatmap renderer and create the feature layer with incidents
       *****************************************************************/
      const colorStops = [
        { ratio: 0 / 12, color: "rgba(25, 43, 51, 0.6)" },
        { ratio: 2 / 12, color: "rgba(30, 140, 160, 1)" },
        { ratio: 3 / 12, color: "rgba(58, 165, 140, 1)" },
        { ratio: 4 / 12, color: "rgba(64, 184, 156, 1)" },
        { ratio: 5 / 12, color: "rgba(68, 199, 168, 1)" },
        { ratio: 6 / 12, color: "rgba(73, 214, 181, 1)" },
        { ratio: 7 / 12, color: "rgba(78, 230, 194, 1)" },
        { ratio: 8 / 12, color: "rgba(83, 245, 207, 1)" },
        { ratio: 9 / 12, color: "rgba(85, 250, 211, 1)" },
        { ratio: 10 / 12, color: "rgba(102, 255, 219, 1)" },
        { ratio: 11 / 12, color: "rgba(121, 237, 210, 1)" },
        { ratio: 12 / 12, color: "rgba(158, 255, 233, 1)" },
      ];

      const heatmapRenderer = new HeatmapRenderer({
        legendOptions: {
          minLabel: "Few",
          maxLabel: "Frequent",
        },
        colorStops: colorStops,
        referenceScale: null,
        maxDensity: 0.0035,
        radius: 35,
        minDensity: 0,
      });

      const popupTemplate = {
        // autocasts as new PopupTemplate()
        title: "Traffic incident #{OBJECTID}",
        content: "<p> {UJAHR} / {UMONAT} </p>", // Show year and month
      };

      const incidentsLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrafficAccidentsGermany2019/FeatureServer",
        popupTemplate: popupTemplate,
        opacity: 0.75,
        renderer: heatmapRenderer,
      });

      /*****************************************************************
       * Setup the Scene component with layers
       *****************************************************************/

      // Wait for the view to initialize
      await viewElement.viewOnReady();

      // Add layers
      viewElement.map.addMany([meshLayer, incidentsLayer]);
      // Set the camera to focus on Munich, Germany
      viewElement.camera = {
        position: {
          spatialReference: {
            latestWkid: 3857,
            wkid: 102100,
          },
          x: 1290156.1245809086,
          y: 6126817.190737828,
          z: 2008.6368858749047,
        },
        heading: 3.283715534412251,
        tilt: 37.05084328412177,
      };

      /*****************************************************************
       * Allow to toggle between fixed reference scale (where radius
       * remains constant in real world size) and visualization where
       * the radius remains constant in screen size (in points).
       *****************************************************************/

      let fixToScale = false;

      function toggleHeatmapMode() {
        if (fixToScale) {
          heatmapRenderer.referenceScale = viewElement.scale;
        } else {
          heatmapRenderer.referenceScale = null;
        }
      }

      const promptText = {
        addStaticScale: "Static reference scale",
        removeScale: "Remove reference scale",
      };

      toggleModeButton.textContent = promptText.addStaticScale;

      toggleModeButton.addEventListener("click", () => {
        fixToScale = !fixToScale;
        if (fixToScale) {
          toggleHeatmapMode();
          toggleModeButton.textContent = promptText.removeScale;
        } else {
          toggleHeatmapMode();
          toggleModeButton.textContent = promptText.addStaticScale;
        }
      });

      /*****************************************************************
       * Customize the Legend component
       *****************************************************************/
      await legend.componentOnReady();
      legend.layerInfos = [
        {
          layer: incidentsLayer,
          title: "Number of traffic incidents",
        },
      ];
    </script>
  </body>
</html>