Area Measurement 2D

ESM:

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

CDN:

No specific import is needed for this component.

Since:ArcGIS Maps SDK for JavaScript 4.28

The Area Measurement 2D component calculates and displays the area and perimeter of a polygon only 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`	`"acres" \| "ares" \| "hectares" \| "imperial" \| "metric" \| "square-centimeters" \| "square-decimeters" \| "square-feet" \| "square-inches" \| "square-kilometers" \| "square-meters" \| "square-miles" \| "square-millimeters" \| "square-nautical-miles" \| "square-us-feet" \| "square-yards"`
`unitOptions`		`Array<"metric" \| "imperial" \| "square-millimeters" \| "square-centimeters" \| "square-decimeters" \| "square-meters" \| "square-kilometers" \| "square-inches" \| "square-feet" \| "square-yards" \| "square-miles" \| "square-nautical-miles" \| "square-us-feet" \| "acres" \| "ares" \| "hectares">`
`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-area"

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: "acres" | "ares" | "hectares" | "imperial" | "metric" | "square-centimeters" | "square-decimeters" | "square-feet" | "square-inches" | "square-kilometers" | "square-meters" | "square-miles" | "square-millimeters" | "square-nautical-miles" | "square-us-feet" | "square-yards"

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

Attribute: unit

unitOptions

Property

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

List of available units and unit systems (imperial, metric) for displaying the area 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 Area 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 arcgisAreaMeasurement2d = document.querySelector("arcgis-area-measurement-2d");
document.body.append(arcgisAreaMeasurement2d);
await arcgisAreaMeasurement2d.componentOnReady();
console.log("arcgis-area-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.