Skip To ContentArcGIS for DevelopersSign In Dashboard

MeasurementViewModel

require(["esri/widgets/Measurement/MeasurementViewModel"], function(MeasurementVM) { /* code goes here */ });
Class: esri/widgets/Measurement/MeasurementViewModel
Inheritance: MeasurementViewModel Accessor
Since: ArcGIS API for JavaScript 4.13

Provides the logic for the Measurement widget. Read the Widget development - ViewModel pattern guide topic to get a better understanding of how to use this class.

See also:

Constructors

new MeasurementViewModel(properties)
Parameter:
properties Object
optional

See the properties for a list of all the properties that may be passed into the constructor.

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
NameTypeSummaryClass
String

Specifies the current measurement tool to display.

more details
more detailsMeasurementViewModel
AreaMeasurement2DViewModel|AreaMeasurement3DViewModel|DirectLineMeasurement3DViewModel|DistanceMeasurement2DViewModel

View model of the active measurement widget.

more details
more detailsMeasurementViewModel
String

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

more details
more detailsMeasurementViewModel
String

The name of the class.

more details
more detailsAccessor
String

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

more details
more detailsMeasurementViewModel
String

The ViewModel's state.

more details
more detailsMeasurementViewModel
MapView|SceneView

A reference to the MapView or SceneView.

more details
more detailsMeasurementViewModel

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

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.

ValueDescription
disablednot ready yet
readyready for measuring
measuringmeasuring has started
measuredmeasuring 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);
});

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

API Reference search results

NameTypeModule
Loading...