Distance Measurement 2D

ESM:

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-distance-measurement-2d";

CDN:

No specific import is needed for this component.

Since:ArcGIS Maps SDK for JavaScript 4.28

The Distance Measurement 2D component calculates and displays the distance between two or more points in a MapView.

Demo

Properties

Property	Attribute	Type
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`icon`	`icon`	`string`
`label`	`label`	`string`
`position` deprecated	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`referenceElement`	`reference-element`	`HTMLArcgisLinkChartElement \| HTMLArcgisMapElement \| HTMLArcgisSceneElement \| string`
`snappingOptions`		`SnappingOptions`
`state` readonlyreflected	`state`	`"disabled" \| "measured" \| "measuring" \| "ready"`
`unit`	`unit`	`"centimeters" \| "decimeters" \| "feet" \| "imperial" \| "inches" \| "kilometers" \| "meters" \| "metric" \| "miles" \| "millimeters" \| "nautical-miles" \| "us-feet" \| "yards"`
`unitOptions`		`Array<"meters" \| "metric" \| "centimeters" \| "decimeters" \| "feet" \| "inches" \| "kilometers" \| "millimeters" \| "nautical-miles" \| "us-feet" \| "yards" \| "miles" \| "imperial">`
`view`		`MapView`

autoDestroyDisabled

Property

autoDestroyDisabled: boolean

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy method when you are done to prevent memory leaks.

Attribute: auto-destroy-disabled
Default value: false

icon

Property

icon: string

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).

See also

Calcite Icons

Attribute: icon
Default value: "measure-line"

label

Property

label: string

The widget's default label.

Attribute: label

position

deprecatedProperty

position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"

Deprecatedsince 4.34, use slot instead.

Attribute: position

referenceElement

Property

referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string

By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.

See also

Associate components with a Map or Scene component

Attribute: reference-element

snappingOptions

Property

snappingOptions: SnappingOptions

The SnappingOptions for sketching.

state

readonly

Property

state: "disabled" | "measured" | "measuring" | "ready"

The current state of the component.

Attribute: state
Default value: "disabled"

unit

Property

unit: "centimeters" | "decimeters" | "feet" | "imperial" | "inches" | "kilometers" | "meters" | "metric" | "miles" | "millimeters" | "nautical-miles" | "us-feet" | "yards"

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

Attribute: unit

unitOptions

Property

unitOptions: Array<"meters" | "metric" | "centimeters" | "decimeters" | "feet" | "inches" | "kilometers" | "millimeters" | "nautical-miles" | "us-feet" | "yards" | "miles" | "imperial">

List of available units and unit systems (imperial, metric) for displaying the distance values.

view

Property

view: MapView

The view associated with the component.

Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Distance Measurement 2D component will be associated with a map or scene component rather than using the view property.

Methods

Method	Signature
`clear`	`clear(): Promise<void>`
`componentOnReady`	`componentOnReady(): Promise<void>`
`destroy`	`destroy(): Promise<void>`
`start`	`start(): Promise<void>`

clear

Method

clear(): Promise<void>

Clear the current measurement.

Returns: Promise<void>

componentOnReady

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Example

Use dark colors for code blocksCopy
const arcgisDistanceMeasurement2d = document.querySelector("arcgis-distance-measurement-2d");
document.body.append(arcgisDistanceMeasurement2d);
await arcgisDistanceMeasurement2d.componentOnReady();
console.log("arcgis-distance-measurement-2d is ready to go!");

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

start

Method

start(): Promise<void>

Starts a new measurement.

Returns: Promise<void>

Events

Event	Type
`arcgisPropertyChange`	`CustomEvent<{ name: "state"; }>`
`arcgisReady`	`CustomEvent<void>`

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "state"; }>

Emitted when the value of a property is changed. Use this to listen to changes to properties.

arcgisReady

Event

arcgisReady: CustomEvent<void>

Emitted when the component associated with a map or scene view is ready to be interacted with.