Toggle ground elevation | 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>Toggle ground elevation | 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: 10px;
      }
    </style>
  </head>
  <body>
    <arcgis-scene
      basemap="hybrid"
      ground="world-elevation"
      camera-position="7.72467933, 46.0041827, 4950"
      camera-tilt="80"
      camera-heading="240"
    >
      <arcgis-home slot="top-left"></arcgis-home>
      <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">
        <calcite-switch id="elevationSwitch" label-text-start="Elevation" checked></calcite-switch>
      </div>
    </arcgis-scene>
    <script type="module">
      // Imports
      const [ElevationLayer] = await $arcgis.import(["@arcgis/core/layers/ElevationLayer.js"]);

      const viewElement = document.querySelector("arcgis-scene");
      const elevationSwitch = document.querySelector("#elevationSwitch");

      await viewElement.viewOnReady();
      elevationSwitch.addEventListener("calciteSwitchChange", updateElevation);

      function updateElevation() {
        // Turn ground layers visibility on/off
        viewElement.ground.layers.forEach((layer) => {
          layer.visible = elevationSwitch.checked;
        });
      }
    </script>
  </body>
</html>