Elevation Profile group | Sample | ArcGIS Maps SDK for JavaScript

This sample demonstrates how to organize several Elevation Profile component profile lines into ElevationProfileGroup objects. An ElevationProfileLineGround samples all ground layers as a single profile, so groups are useful when you want to separate the elevation sources that contribute to the chart. In this sample, one group compares the pre- and post-landslide Oso survey elevation layers, while a second group shows (in the chart only, not in the view) the default Terrain 3D as context.

arcgisElevationProfile.profiles = new Collection([
  {
    type: "group",
    title: "Oso surveys",
    profiles: new Collection([
      {
        type: "query",
        title: "Pre-Landslide (March 2014)",
        source: beforeLandslideLayer,
        color: profileColors.beforeLandslide,
      },
      {
        type: "query",
        title: "Post-Landslide (April 2014)",
        source: afterLandslideLayer,
        color: profileColors.afterLandslide,
      },
    ]),
  },
  {
    type: "group",
    title: "Regional context",
    profiles: new Collection([
      {
        type: "query",
        title: `${terrain3DLayer.title} (${new Date().getFullYear()})`,
        source: terrain3DLayer,
        color: profileColors.terrainContext,
        viewOptions: {
          lineVisible: false,
          indicatorPointVisible: false,
        },
      },
    ]),
  },
]);

For more configuration options see the Elevation Profile component in the Map components reference or the ElevationProfileAnalysis in the Core API reference.

Analysis objects

Analysis objects

Elevation Profile analysis

Elevation Profile component

<!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>Elevation Profile group | 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.1/"></script>

    <style>
      html,
      body {
        margin: 0;
        height: 100%;
      }

      arcgis-elevation-profile {
        width: 460px;
        max-width: calc(100vw - 30px);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
      }

      #groundLayerToggle {
        position: absolute;
        bottom: 24px;
        left: 50%;
        z-index: 1;
        transform: translateX(-50%);
      }
    </style>
  </head>

  <body>
    <arcgis-scene item-id="2473d6756adf4c45b2b89a8f9e4a2b39">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"></arcgis-compass>
      <arcgis-elevation-profile
        slot="top-right"
        elevation-unit="metric"
        distance-unit="metric"
        hide-select-button
      ></arcgis-elevation-profile>

      <calcite-segmented-control id="groundLayerToggle">
        <calcite-segmented-control-item value="before" checked>Before landslide</calcite-segmented-control-item>
        <calcite-segmented-control-item value="after">After landslide</calcite-segmented-control-item>
      </calcite-segmented-control>
    </arcgis-scene>

    <script type="module">
      const [Collection, Polyline] = await $arcgis.import([
        "@arcgis/core/core/Collection.js",
        "@arcgis/core/geometry/Polyline.js",
      ]);

      // Get a reference to the scene and elevation profile components
      const viewElement = document.querySelector("arcgis-scene");
      const arcgisElevationProfile = document.querySelector("arcgis-elevation-profile");

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

      const profileLine = new Polyline({
        spatialReference: {
          latestWkid: 3857,
          wkid: 102100,
        },
        paths: [
          [
            [-13564719.101959955, 6154408.153564724, 0],
            [-13564115.888797166, 6154244.615736664, 0],
          ],
        ],
      });

      const groundLayers = viewElement.map.ground.layers;
      const beforeLandslideLayer = groundLayers.find((layer) => layer.title === "ELEV__3857__US_Oso__LandslideBefore");
      const afterLandslideLayer = groundLayers.find((layer) => layer.title === "ELEV__3857__US_Oso__LandslideAfter");
      const terrain3DLayer = groundLayers.find((layer) => layer.title?.includes("Terrain3D"));

      if (!beforeLandslideLayer || !afterLandslideLayer) {
        throw new Error("One or more Oso elevation layers were not found in the WebScene ground layers.");
      }

      if (!terrain3DLayer) {
        throw new Error("The default terrain 3D elevation layer was not found in the WebScene ground layers.");
      }

      const groundLayerToggle = document.getElementById("groundLayerToggle");
      const groundLayerOptions = {
        before: beforeLandslideLayer,
        after: afterLandslideLayer,
      };

      const moveGroundLayerToTop = (layer) => {
        groundLayers.reorder(layer, groundLayers.length - 1);
      };

      moveGroundLayerToTop(beforeLandslideLayer);

      // Full-opacity profile line colors for the active state (before/after landslide).
      const profileColors = {
        beforeLandslide: "#F97316",
        afterLandslide: "#DC2626",
        terrainContext: "#2563EB",
      };

      // Shared opacity for whichever profile line is not active.
      const inactiveLineOpacity = 0.4;
      const transparentProfileColors = {
        beforeLandslide: `rgba(249, 115, 22, ${inactiveLineOpacity})`,
        afterLandslide: `rgba(220, 38, 38, ${inactiveLineOpacity})`,
      };

      // Setup grouped elevation profiles
      arcgisElevationProfile.profiles = new Collection([
        {
          type: "group",
          title: "Oso surveys",
          profiles: new Collection([
            {
              type: "query",
              title: "Pre-Landslide (March 2014)",
              source: beforeLandslideLayer,
              color: profileColors.beforeLandslide,
            },
            {
              type: "query",
              title: "Post-Landslide (April 2014)",
              source: afterLandslideLayer,
              color: profileColors.afterLandslide,
            },
          ]),
        },
        {
          type: "group",
          title: "Regional context",
          profiles: new Collection([
            {
              type: "query",
              title: `${terrain3DLayer.title} (${new Date().getFullYear()})`,
              source: terrain3DLayer,
              color: profileColors.terrainContext,
              viewOptions: {
                lineVisible: false,
                indicatorPointVisible: false,
              },
            },
          ]),
        },
      ]);

      const surveyProfiles = arcgisElevationProfile.profiles.getItemAt(0).profiles;
      const preLandslideProfile = surveyProfiles.getItemAt(0);
      const postLandslideProfile = surveyProfiles.getItemAt(1);

      const updateProfileLineStyling = (state) => {
        const isBeforeState = state === "before";

        // In each state, keep the current line vivid and dim the other one.
        preLandslideProfile.color = isBeforeState
          ? profileColors.beforeLandslide
          : transparentProfileColors.beforeLandslide;
        postLandslideProfile.color = isBeforeState
          ? transparentProfileColors.afterLandslide
          : profileColors.afterLandslide;
      };

      updateProfileLineStyling("before");

      groundLayerToggle.addEventListener("calciteSegmentedControlChange", (event) => {
        const state = event.target.value;
        moveGroundLayerToTop(groundLayerOptions[state]);
        updateProfileLineStyling(state);
      });

      // Set the default polyline along which the elevation is sampled
      arcgisElevationProfile.geometry = profileLine;
    </script>
  </body>
</html>