Skip to content
import MeasurementViewModel from "@arcgis/core/widgets/Measurement/MeasurementViewModel.js";
Inheritance:
MeasurementViewModelAccessor
Since
ArcGIS Maps SDK for JavaScript 4.13

Provides the logic for the Measurement widget.

See also

Constructors

Constructor

Constructor
Parameters
ParameterTypeDescriptionRequired
properties
See the properties table for a list of all the properties that may be passed into the constructor.

Properties

Any properties can be set, retrieved or listened to. See the Watch for changes topic.

activeTool

Property
Type
MeasurementComponentType | null | undefined

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.

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

activeViewModel

readonly Property
Type
ActiveMeasurementViewModel | null | undefined

View model of the active measurement widget.

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

areaUnit

Property
Type
SystemOrAreaUnit

Unit system (imperial, metric) or specific unit used for displaying the area values. Possible values are: metric, imperial, square-inches, square-feet, square-us-feet, square-yards, square-miles, square-nautical-miles, square-meters, square-kilometers, acres, ares, hectares.

Example
// To create the Measurement widget that displays area in square US feet
let 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

readonlyinherited Property
Type
string
Inherited from: Accessor

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

linearUnit

Property
Type
SystemOrLengthUnit

Unit system (imperial, metric) or specific unit used for displaying the distance values. Possible values are: metric, imperial, inches, feet, us-feet, yards, miles, nautical-miles, meters, kilometers.

Example
// To create the Measurement widget that displays distance in yards
let 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

readonly Property
Type
MeasurementState

The ViewModel's state.

ValueDescription
disablednot ready yet
readyready for measuring
measuringmeasuring has started
measuredmeasuring has finished
Default value
"disabled"
Example
// To display the state of the AreaMeasurement2D widget
let measurement = new Measurement({
view: view,
activeTool: "area"
});
reactiveUtils.watch(
() => measurement.viewModel.state,
(state) => console.log("Current state: ", state)
);

view

Property
Type
MapViewOrSceneView | null | undefined

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

Type definitions