Explore a VoxelLayer using isosurface | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample shows how to edit and modify VoxelIsosurface on a VoxelLayer.

An isosurface is a surface representing a specific value within a continuous variable. It is important to take note that VoxelIsosurface only draws when the renderMode property is surfaces and that the maximum number of isosurfaces that can be drawn is 4. Isosurfaces are for continuous variables only. To draw only a single particular value of discrete variable you would just set the enabled property of all of the other VoxelUniqueValue to false.

The value of the VoxelIsosurface can be modified. The stretchRange values can be used as a reference, but isosurface values are not limited to those values. The value of a VoxelIsosurface can be less than the minimum or greater than the maximum value of a stretchRange.

The colorLocked property defines whether or not the VoxelIsosurface color is automatically updated when the variable’s transfer function’s colorStops change. If the value of colorLocked is true, the VoxelIsosurface will use the specified color property. When set to false, the VoxelIsosurface is automatically updated based on what is defined on the colorStops.

let variableStyle = vxlLayer.getVariableStyle(vxlLayer.currentVariableId);
const range = variableStyle.transferFunction.stretchRange;
const min = Math.min(Math.round(range[0]), Math.round(range[1]));
const max = Math.max(Math.round(range[0]), Math.round(range[1]));
let currentValue = Math.floor((min + max) / 2);
let newIsoSurface = new VoxelIsosurface({
  value: currentValue,
  enabled: true,
  color: [102, 136, 248],
  colorLocked: true,
});

Intro to VoxelLayer

VoxelLayer variable and render mode

VoxelLayer with discrete variable

Modify the color scheme of a continuous variable

<!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>Explore a VoxelLayer using isosurface | 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;
      }

      #panelVoxelControl {
        max-height: calc(100vh - 100px);
        overflow: auto;
        width: 280px;
      }

      arcgis-legend {
        width: 200px;
      }
    </style>
  </head>
  <body>
    <arcgis-scene item-id="3a922ed0c7a8489ea4fbe8747ac560ba">
      <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"
        heading="Temperature Prediction Isosurface"
        style="visibility: hidden"
        slot="top-right">
        <div id="dvIsosurfaceList"></div>
        <calcite-block label="Additional isosurface" expanded>
          <calcite-button id="addIsosurface" width="full">Add Isosurface </calcite-button>
        </calcite-block>
      </calcite-panel>
      <calcite-color-picker
        id="colorPicker"
        style="visibility: hidden"
        clearable
        channels-disabled
        saved-disabled
        scale="s"></calcite-color-picker>
      <arcgis-expand slot="bottom-left">
        <arcgis-legend></arcgis-legend>
      </arcgis-expand>
    </arcgis-scene>
    <script type="module">
      const VoxelIsosurface = await $arcgis.import("@arcgis/core/layers/voxel/VoxelIsosurface.js");

      // Get references to DOM elements
      const viewElement = document.querySelector("arcgis-scene");
      const panelVoxelControl = document.getElementById("panelVoxelControl");
      const colorPicker = document.getElementById("colorPicker");
      const addIsosurface = document.getElementById("addIsosurface");
      const dvIsosurfaceList = document.getElementById("dvIsosurfaceList");

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

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

      // Wait for the voxel layer to be in the component's view
      await viewElement.whenLayerView(voxelLayer);

      // Voxel isosurfaces are shown when the renderMode is set to surfaces
      voxelLayer.renderMode = "surfaces";
      voxelLayer.enableIsosurfaces = true;

      panelVoxelControl.style.visibility = "visible";
      voxelLayer.popupEnabled = true;

      let currentVariableStyle = voxelLayer.getVariableStyle(null);
      let isosurfaceCount = currentVariableStyle.isosurfaces.length;
      let isosurfaceList = [];
      let selectedIsosurface = null;

      // Creates the DOM elements that updates the properties of an isosurface on a VoxelLayer
      const createIsosurfaceItem = function (isosurfaceIndex, isosurface, addNew) {
        const itemBlock = document.createElement("calcite-block");
        itemBlock.collapsible = false;
        itemBlock.expanded = true;
        itemBlock.heading = isosurface.label;
        itemBlock.label = "item block";

        dvIsosurfaceList.appendChild(itemBlock);

        const itemLabel = document.createElement("calcite-label");
        const itemSwitch = document.createElement("calcite-switch");
        itemLabel.layout = "inline-space-between";
        itemLabel.textContent = "Color Locked";
        itemSwitch.checked = isosurface.colorLocked;
        itemBlock.appendChild(itemLabel);
        itemLabel.appendChild(itemSwitch);

        const itemSlider = document.createElement("calcite-slider");
        itemSwitch.classList.add("color-locked-action");
        itemLabel.classList.add("color-locked-action");
        itemSlider.id = "isosurfaceValueSlider_" + isosurfaceIndex.toString();
        //Isosurface can have a value less than the minimum value or greater than the maximum value of the stretch range.
        const range = currentVariableStyle.transferFunction.stretchRange;
        const min = Math.min(Math.round(range[0]), Math.round(range[1]));
        const max = Math.max(Math.round(range[0]), Math.round(range[1]));
        itemSlider.min = min > isosurface.value ? isosurface.value : min;
        itemSlider.max = max < isosurface.value ? isosurface.value : max;
        itemSlider.value = isosurface.value;
        itemSlider.labelHandles = true;
        itemSlider.step = max - min < 10 ? 0.2 : 1;
        itemSlider.addEventListener("calciteSliderInput", function (e) {
          const index = isosurfaceList.map((obj) => obj.sliderId).indexOf(itemSlider.id);
          selectedIsosurface = currentVariableStyle.isosurfaces.getItemAt(index);
          selectedIsosurface.value = itemSlider.value;
          colorPicker.value = selectedIsosurface.color.toHex();
        });
        if (addNew) {
          const itemDeleteAction = document.createElement("calcite-action");
          itemDeleteAction.icon = "trash";
          itemDeleteAction.slot = "actions-end";
          itemDeleteAction.onclick = function () {
            const index = isosurfaceList.map((obj) => obj.sliderId).indexOf(itemSlider.id);
            currentVariableStyle.isosurfaces.removeAt(index);
            isosurfaceList.splice(index, 1);
            itemBlock.remove();
            isosurfaceCount = currentVariableStyle.isosurfaces.length;
            //The maximum number of isosurfaces that can be created is 4.
            addIsosurface.disabled = isosurfaceCount < 4 ? false : true;
          };
          itemBlock.appendChild(itemDeleteAction);
          currentVariableStyle.isosurfaces.add(isosurface);
        }
        itemBlock.appendChild(itemSlider);
        isosurfaceList.push({
          id: isosurfaceIndex,
          sliderId: itemSlider.id,
        });
        isosurfaceCount = currentVariableStyle.isosurfaces.length;
        addIsosurface.disabled = isosurfaceCount < 4 ? false : true;
        itemSwitch.addEventListener("calciteSwitchChange", function () {
          // A voxel layer can have multiple isosurface with a maximum of 4 and is stored as an array.
          // If an isosurface needs to be modified or removed, it is important to always check the index because it can change (e.g. removing an isosurface in the middle of the array).
          // Having a separate array variable that stores all the isosurfaces can help to specify which index to use.*/
          const index = isosurfaceList.map((obj) => obj.sliderId).indexOf(itemSlider.id);
          selectedIsosurface = currentVariableStyle.isosurfaces.getItemAt(index);

          selectedIsosurface.colorLocked = !selectedIsosurface.colorLocked;
          //If the isosurface colorLocked is true, the isosurface will use the chosen color from the color picker window.
          //If the isosurface colorLocked is false, it will use the color from the colorStops.
          if (selectedIsosurface.colorLocked) {
            const rect = this.getBoundingClientRect();
            let topValue = rect.bottom;
            if (rect.bottom + colorPicker.clientHeight >= document.documentElement.clientHeight) {
              topValue = rect.top - colorPicker.clientHeight;
            }
            colorPicker.style = `position:absolute;top:${topValue}px;right:${window.innerWidth - rect.right}px;z-index:999`;
            colorPicker.value = selectedIsosurface.color.toHex();
          } else {
            colorPicker.style = "visibility:hidden";
          }
        });
        if (!addNew && isosurfaceIndex === 0) {
          selectedIsosurface = !isosurface.colorLocked ? isosurface : selectedIsosurface;
          colorPicker.value = isosurface.color.toHex();
        }
      };

      // Get the isosurfaces on a VoxelLayer
      for (let i = 0; i < isosurfaceCount; i++) {
        // A sample on how to update an existing isosurface
        const thisIsosurface = currentVariableStyle.isosurfaces.getItemAt(i);
        thisIsosurface.value = Math.round(thisIsosurface.value);
        createIsosurfaceItem(i, thisIsosurface, false);
      }

      addIsosurface.addEventListener("click", function (e) {
        currentVariableStyle = voxelLayer.getVariableStyle(null);
        isosurfaceCount = currentVariableStyle.isosurfaces.length;
        // A voxel layer can have up to 4 isosurfaces
        if (isosurfaceCount < 4) {
          const range = currentVariableStyle.transferFunction.stretchRange;
          const min = Math.min(Math.round(range[0]), Math.round(range[1]));
          const max = Math.max(Math.round(range[0]), Math.round(range[1]));
          let currentValue = Math.floor((min + max) / 2);
          const lockedColor = voxelLayer.getColorForContinuousDataValue(
            voxelLayer.currentVariableId,
            currentValue,
            false,
          );
          let newIsosurface = new VoxelIsosurface({
            value: currentValue,
            enabled: true,
            color: lockedColor,
            label: "Isosurface " + (isosurfaceCount + 1).toString(),
          });
          createIsosurfaceItem(isosurfaceCount, newIsosurface, true);
        }
      });

      // Update the color of an isosurface
      colorPicker.addEventListener("calciteColorPickerChange", function (e) {
        selectedIsosurface.color = colorPicker.value;
      });

      // Listen to a click outside the colorPicker element
      // close the color picker window
      document.addEventListener("click", (e) => {
        if (e.target !== colorPicker && !e.target.classList.contains("color-locked-action")) {
          colorPicker.style = "visibility: hidden;";
        }
      });
    </script>
  </body>
</html>