Exploratory Analysis component | Sample | ArcGIS Maps SDK for JavaScript

This sample demonstrates how to build a measurement and analysis experience with the Exploratory Analysis component.

The app displays a web map in a 2D Map and a web scene in a 3D Scene. Each view has an Exploratory Analysis component whose child components determine the available tools:

The 2D view provides Distance Measurement 2D, Area Measurement 2D, and Elevation Profile.
The 3D view provides Direct Line Measurement 3D, Area Measurement 3D, Volume Measurement, and Elevation Profile.

The Exploratory Analysis component creates a toolbar from its direct children and manages which analysis is visible and active.

      <arcgis-exploratory-analysis id="analysis2d" slot="top-right" show-heading>
        <!-- each child element will appear in the toolbar -->
        <arcgis-distance-measurement-2d></arcgis-distance-measurement-2d>
        <arcgis-area-measurement-2d></arcgis-area-measurement-2d>
        <arcgis-elevation-profile></arcgis-elevation-profile>
      </arcgis-exploratory-analysis>

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.

      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
        clearAllAnalyses();

        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";
        }
      }

Related samples and resources

Measurement in 2D

Measurement components in 3D

Elevation Profile component

Area measurement analysis object

Volume measurement analysis object

Analysis objects