VoxelLayer variable and render mode | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

<!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>VoxelLayer variable and render mode | 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;
      }

      arcgis-legend {
        width: 200px;
      }
    </style>
  </head>

  <body>
    <arcgis-scene
      item-id="2fd98698a4fa4b88ae81dda09a682a2c"
      camera-position="-51.38584192, -4.68031927, -701095.56541"
      camera-heading="314.62"
      camera-tilt="97.46">
      <arcgis-zoom slot="top-left"> </arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"> </arcgis-compass>
      <calcite-panel id="panelVoxelControl" style="visibility: hidden" slot="bottom-right">
        <calcite-block label="Current Variable" expanded>
          <calcite-label
            >Render Mode:
            <calcite-segmented-control id="controlRenderMode" width="full">
              <calcite-segmented-control-item value="volume" checked
                >Volume</calcite-segmented-control-item
              >
              <calcite-segmented-control-item value="surfaces"
                >Surfaces</calcite-segmented-control-item
              >
            </calcite-segmented-control>
          </calcite-label>
          <calcite-label
            >Current Variable:
            <calcite-select hidden id="selectVariable" label="Current Variable"> </calcite-select>
          </calcite-label>
          <calcite-label
            >Vertical Exaggeration:
            <calcite-slider id="sliderExaggeration" max="200" label-handles></calcite-slider>
          </calcite-label>
          <calcite-label
            >Vertical Offset(m):
            <calcite-input id="inputOffset" type="number"></calcite-input>
          </calcite-label>
        </calcite-block>
      </calcite-panel>
      <arcgis-expand slot="bottom-left" expanded>
        <arcgis-legend id="expandLegend"></arcgis-legend>
      </arcgis-expand>
    </arcgis-scene>

    <script type="module">
      // Get references to DOM elements
      const viewElement = document.querySelector("arcgis-scene");
      const selectVariable = document.getElementById("selectVariable");
      const panelVoxelControl = document.getElementById("panelVoxelControl");
      const sliderExaggeration = document.getElementById("sliderExaggeration");
      const inputOffset = document.getElementById("inputOffset");
      const controlRenderMode = document.getElementById("controlRenderMode");

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

      panelVoxelControl.style.visibility = "visible";

      const voxelLayer = viewElement.map.layers.find((layer) => layer.type === "voxel");
      const voxelVolumeStyle = voxelLayer.volumeStyles.getItemAt(0);

      voxelLayer.popupEnabled = true;
      voxelLayer.renderMode = "volume";

      // Get all variables in a VoxelLayer
      // display it on a dropdown menu
      for (let i = 0; i < voxelLayer.variables.length; ++i) {
        const vxlVariable = voxelLayer.variables.getItemAt(i);
        const item = document.createElement("calcite-option");
        item.setAttribute("label", voxelLayer.variableStyles.getItemAt(i).label);
        item.setAttribute("value", vxlVariable.id);
        if (vxlVariable.id === voxelLayer.currentVariableId) {
          item.selected = true;
          voxelLayer.currentVariableId = vxlVariable.id;
        }
        selectVariable.hidden = false;
        selectVariable.appendChild(item);
      }
      selectVariable.addEventListener("calciteSelectChange", function () {
        voxelLayer.currentVariableId = selectVariable.selectedOption.value;
      });

      // Initialize vertical exaggeration slider value
      sliderExaggeration.value = voxelVolumeStyle.verticalExaggeration;
      // Listen to the slider input change on the vertical exaggeration
      sliderExaggeration.addEventListener("calciteSliderInput", function () {
        // Update vertical exaggeration by cloning the volumeStyles
        // and modifying the first volumeStyle's verticalExaggeration.
        // Only 1 volume, and therefore only 1 volumeStyle, is
        // currently supported so there should always be exactly
        // 1 volumeStyle in the volumeStyles array.
        const newVolStyles = voxelLayer.volumeStyles.clone();
        const newVolStyle0 = newVolStyles.getItemAt(0);
        newVolStyle0.verticalExaggeration = sliderExaggeration.value;
        voxelLayer.volumeStyles = newVolStyles;
      });

      // Initialize vertical offset input value
      inputOffset.value = voxelVolumeStyle.verticalOffset.toString();
      // Listen to the input change on the vertical offset
      inputOffset.addEventListener("calciteInputChange", function () {
        const newVolOffsetStyles = voxelLayer.volumeStyles.clone();
        const newVolOffsetStyle0 = newVolOffsetStyles.getItemAt(0);
        newVolOffsetStyle0.verticalOffset = inputOffset.value;
        voxelLayer.volumeStyles = newVolOffsetStyles;
      });

      // Listen to the control change on the render mode
      controlRenderMode.addEventListener("calciteSegmentedControlChange", function () {
        // Change the voxel's render mode to "surfaces" or "volume"
        voxelLayer.renderMode = controlRenderMode.selectedItem.value;
      });
    </script>
  </body>
</html>