Elevation Profile component | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample demonstrates how to use the Elevation Profile component to generate and display elevation profiles. The line used for the calculation can be interactively drawn as a single or multi-segment line. The component’s profiles property is configured to show two elevation profiles: one for ground, one for the scene, which includes buildings.

document.querySelector("arcgis-elevation-profile").profiles = [
  {
    type: "ground", // first profile line samples the ground elevation
  },
  {
    type: "scene", // second profile samples the scene and shows building profiles
  },
];

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

Elevation Profile analysis

<!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 component | 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 {
        margin: 0;
        height: 100%;
      }

      arcgis-elevation-profile {
        width: 350px;
      }
    </style>
  </head>

  <body>
    <arcgis-scene
      item-id="9a542f6755274436985617a462ffdf44"
      camera-position="-74.006438, 40.6934417, 686"
      camera-tilt="66"
      camera-heading="353">
      <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"></arcgis-elevation-profile>
    </arcgis-scene>

    <script type="module">
      // 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();

      // Setup the elevation profiles
      arcgisElevationProfile.profiles = [
        {
          type: "ground", // first profile line samples the ground elevation
        },
        {
          type: "scene", // second profile samples the scene and shows building profiles
        },
      ];
    </script>
  </body>
</html>