ElevationLayer | Sample | ArcGIS Maps SDK for JavaScript

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

      #elevationDiv {
        background-color: #ffffff;
        box-shadow: 2px 2px 10px rgba(150, 150, 150, 0.6);
        padding: 0px 15px 15px 15px;
      }
    </style>
  </head>

  <body>
    <arcgis-scene
      basemap="satellite"
      ground="world-elevation"
      camera-position="-121.834, 48.284, 995"
      camera-tilt="56"
      camera-heading="270"
    >
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"></arcgis-compass>
      <div id="elevationDiv" slot="top-right">
        <h3>The 2014 Oso Landslide</h3>
        <calcite-switch id="elevationSwitch" label-text-start="Use more detailed elevation data"></calcite-switch>
        <div>
          <calcite-link target="_blank" href="https://en.wikipedia.org/wiki/2014_Oso_mudslide">Read more</calcite-link>
        </div>
      </div>
    </arcgis-scene>
    <script type="module">
      // Imports
      const [ElevationLayer] = await $arcgis.import(["@arcgis/core/layers/ElevationLayer.js"]);

      // Get references to html elements
      const viewElement = document.querySelector("arcgis-scene");
      const elevationSwitch = document.querySelector("#elevationSwitch");

      viewElement.viewOnReady(async () => {
        // Create the elevation layer
        const elevationLayer = new ElevationLayer({
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/OsoLandslide/OsoLandslide_After_3DTerrain/ImageServer",
          visible: false,
        });

        // Add the elevationlayer after the ground instance is created
        viewElement.ground.when(() => {
          viewElement.ground.layers.add(elevationLayer);
        });

        elevationSwitch.addEventListener("calciteSwitchChange", () => {
          elevationLayer.visible = elevationSwitch.checked;
        });
      });
    </script>
  </body>
</html>