Property Overview

Property Details

activeTool String

Specifies the current measurement tool to display. Setting its value to area activates the area measurement tool and it works for both MapView and SceneView. To measure distance in a MapView set the property to distance and in a SceneView set it to direct-line. If this property is not set, the widget will not be displayed.

Possible Values:"area"|"distance"|"direct-line"

Default Value:null

Example:

// To create the Measurement widget with SceneView's linear measurement widget active.
var measurement = new Measurement({
  viewModel: {
    view: view,
    activeTool: "direct-line"
  }
});

activeViewModel AreaMeasurement2DViewModel|AreaMeasurement3DViewModel|DirectLineMeasurement3DViewModel|DistanceMeasurement2DViewModel

View model of the active measurement widget.

Example:

// Print the active view model to the console.
var measurement = new Measurement({
  viewModel: {
    areaUnit: "square-us-feet",
    view: view,
    activeTool: "area"
  }
});
console.log("Active ViewModel: ", measurement.viewModel.activeViewModel);

areaUnit String

Unit system (imperial, metric) or specific unit used for displaying the area values.

Possible Values:"metric"|"imperial"|"square-inches"|"square-feet"|"square-us-feet"|"square-yards"|"square-miles"|"square-meters"|"square-kilometers"|"acres"|"ares"|"hectares"

Example:

// To create the Measurement widget that displays area in square US feet
var measurement = new Measurement({
  viewModel: {
    areaUnit: "square-us-feet",
    view: view,
    activeTool: "area"
  }
});

// To display the current measurement unit for area
console.log("Current unit: ", measurement.viewModel.areaUnit);

declaredClass Stringreadonly inherited

The name of the class. The declared class name is formatted as esri.folder.className.

linearUnit String

Unit system (imperial, metric) or specific unit used for displaying the distance values.

Possible Values:"metric"|"imperial"|"inches"|"feet"|"us-feet"|"yards"|"miles"|"nautical-miles"|"meters"|"kilometers"

Example:

// To create the Measurement widget that displays distance in yards
var measurement = new Measurement({
  viewModel: {
    linearUnit: "yards",
    view: view,
    activeTool: "distance"
  }
});

// To display the current measurement unit for distance
console.log('Current unit: ', measurement.viewModel.linearUnit);

state Stringreadonly

The ViewModel's state.

Value	Description
disabled	not ready yet
ready	ready for measuring
measuring	measuring has started
measured	measuring has finished

Possible Values:"disabled"|"ready"|"measuring"|"measured"

Default Value:disabled

Example:

// To display the state of the AreaMeasurement2D widget
var measurement = new Measurement({
  view: view,
  activeTool: "area"
});
measurement.watch("viewModel.state", function(state){
  console.log("Current state: ", state);
});

view MapView|SceneView

A reference to the MapView or SceneView.

Example:

// Add the measurement widget to the upper right hand corner.
const measurement = new Measurement({
  viewModel: {
    view: view,
    activeTool = "distance";
  }
});
view.ui.add(measurement, "top-right");