Measurement components (2D + 3D) | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample demonstrates how to build a measurement experience with Map components and a Calcite Action Bar.

The app displays the same map content in both a 2D Map and a 3D Scene by assigning them a shared Map instance (a basemap TileLayer plus a FeatureLayer). The toolbar buttons control which measurement component is visible and active.

In 2D, distance measurement uses the Distance Measurement 2D component.
In 3D, distance measurement uses the Direct Line Measurement 3D component.
Area measurement uses the Area Measurement 2D and Area Measurement 3D components.

The sample tracks state with variables (activeDimension: 2D/3D, activeTool: distance/area). Clicking a tool button shows the correct measurement component for the current view and calls start().

      // State tracked independently of the Measurement components to manage UI and interactions.
      let activeDimension = "2d"; // "2d" | "3d"
      let activeTool = null; // null | "distance" | "area"

      function startTool(toolName) {
        activeTool = toolName;

        const currentTools = toolElements[activeDimension];
        const toolToShow = currentTools[toolName];
        const toolToHide = currentTools[toolName === "distance" ? "area" : "distance"];

        toolToHide.hidden = true;
        toolToShow.hidden = false;
        toolToShow.start();

        setActionStates();
      }

When switching between 2D and 3D, the sample clones the active viewpoint, applies a latitude-based scale adjustment to better match perceived zoom between views, swaps the visible view element, and clears any measurements so results never persist across 2D/3D.

<!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>Measurement components (2D + 3D) | 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-map,
      arcgis-scene {
        position: absolute;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 400ms ease,
          visibility 400ms ease;
      }

      arcgis-map.visible,
      arcgis-scene.visible {
        opacity: 1;
        visibility: visible;
      }

      #toolbar {
        position: absolute;
        top: 15px;
        right: 15px;
        border-radius: 6px;
        box-shadow: rgba(0, 0, 0, 0.2) 0 1px 6px;
        background: var(--calcite-color-foreground-1);
      }

      #viewToggle {
        position: absolute;
        top: 15px;
        left: 60px;
      }
    </style>
  </head>

  <body>
    <arcgis-map id="map2d" center="26.1025, 44.4268" zoom="6" class="visible">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-distance-measurement-2d id="distance2d" slot="bottom-right" hidden>
      </arcgis-distance-measurement-2d>
      <arcgis-area-measurement-2d id="area2d" slot="bottom-right" hidden>
      </arcgis-area-measurement-2d>
    </arcgis-map>

    <arcgis-scene id="scene3d" center="26.1025, 44.4268" scale="123456789" camera-tilt="45">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"></arcgis-compass>
      <arcgis-direct-line-measurement-3d id="distance3d" slot="bottom-right" hidden>
      </arcgis-direct-line-measurement-3d>
      <arcgis-area-measurement-3d id="area3d" slot="bottom-right" hidden>
      </arcgis-area-measurement-3d>
    </arcgis-scene>

    <div id="viewToggle">
      <calcite-button id="switchView" appearance="outline-fill" kind="neutral" alignment="start"
        >3D</calcite-button
      >
    </div>

    <calcite-action-bar id="toolbar" expand-disabled layout="horizontal">
      <calcite-action id="distanceAction" text="Distance" icon="measure"></calcite-action>
      <calcite-action id="areaAction" text="Area" icon="polygon"></calcite-action>
      <calcite-action id="clearAction" text="Clear" icon="trash"></calcite-action>
    </calcite-action-bar>

    <script type="module">
      const [Map, TileLayer, FeatureLayer] = await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/layers/TileLayer.js",
        "@arcgis/core/layers/FeatureLayer.js",
      ]);

      const map2d = document.getElementById("map2d");
      const scene3d = document.getElementById("scene3d");

      const distance2d = document.getElementById("distance2d");
      const area2d = document.getElementById("area2d");
      const distance3d = document.getElementById("distance3d");
      const area3d = document.getElementById("area3d");

      const switchViewButton = document.getElementById("switchView");
      const distanceAction = document.getElementById("distanceAction");
      const areaAction = document.getElementById("areaAction");
      const clearAction = document.getElementById("clearAction");

      // World Ocean Base Basemap
      const tileLayer = new TileLayer({
        url: "https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer",
      });

      // Capital cities in Europe FeatureLayer
      const featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/europe_country_capitals/FeatureServer/0",
      });

      // Create a shared map used by both the 2D and 3D views.
      const sharedMap = new Map({
        layers: [tileLayer, featureLayer],
      });

      map2d.map = sharedMap;
      scene3d.map = sharedMap;

      await map2d.viewOnReady();
      await scene3d.viewOnReady();


      // State tracked independently of the Measurement components to manage UI and interactions.
      let activeDimension = "2d"; // "2d" | "3d"
      let activeTool = null; // null | "distance" | "area"


      const toolElements = {
        "2d": {
          distance: distance2d,
          area: area2d,
        },
        "3d": {
          distance: distance3d,
          area: area3d,
        },
      };

      function setActionStates() {
        distanceAction.active = activeTool === "distance";
        areaAction.active = activeTool === "area";
      }

      function hideAllToolUIs() {
        distance2d.hidden = true;
        area2d.hidden = true;
        distance3d.hidden = true;
        area3d.hidden = true;
      }

      function clearAllMeasurements() {
        distance2d.clear();
        area2d.clear();
        distance3d.clear();
        area3d.clear();

        activeTool = null;
        hideAllToolUIs();
        setActionStates();
      }

      function startTool(toolName) {
        activeTool = toolName;

        const currentTools = toolElements[activeDimension];
        const toolToShow = currentTools[toolName];
        const toolToHide = currentTools[toolName === "distance" ? "area" : "distance"];

        toolToHide.hidden = true;
        toolToShow.hidden = false;
        toolToShow.start();

        setActionStates();
      }

      function showAndHide(elementToShow, elementToHide) {
        elementToShow.classList.add("visible");
        elementToHide.classList.remove("visible");
      }

      function getLatitudeFromViewpoint(viewpoint) {
        const lat = viewpoint?.targetGeometry?.latitude;
        return typeof lat === "number" ? lat : 0;
      }

      function switchView() {
        const switchingFrom2D = activeDimension === "2d";
        const activeViewpoint = switchingFrom2D
          ? map2d.viewpoint.clone()
          : scene3d.viewpoint.clone();

        // Adjust for Web Mercator distortion in 2D maps (scale increases with latitude).
        const latitude = getLatitudeFromViewpoint(activeViewpoint);
        const scaleConversionFactor = Math.cos((latitude * Math.PI) / 180);

        // Switching between 2D and 3D clears measurements
        clearAllMeasurements();

        if (switchingFrom2D) {
          activeViewpoint.scale *= scaleConversionFactor;
          scene3d.viewpoint = activeViewpoint;
          showAndHide(scene3d, map2d);

          activeDimension = "3d";
          switchViewButton.textContent = "2D";
        } else {
          activeViewpoint.scale /= scaleConversionFactor;
          map2d.viewpoint = activeViewpoint;
          showAndHide(map2d, scene3d);

          activeDimension = "2d";
          switchViewButton.textContent = "3D";
        }
      }

      switchViewButton.addEventListener("click", switchView);
      distanceAction.addEventListener("click", () => startTool("distance"));
      areaAction.addEventListener("click", () => startTool("area"));
      clearAction.addEventListener("click", clearAllMeasurements);

      // Initial state.
      hideAllToolUIs();
      setActionStates();
    </script>
  </body>
</html>