Elevation Profile

ESM:

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-elevation-profile";

CDN:

No specific import is needed for this component.

The Elevation Profile component is used to generate and display an elevation profile from an input line graphic.

See also

Sample - Elevation Profile component

Demo

Properties

Property	Attribute	Type
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`effectiveUnits` readonly		`EffectiveUnits`
`hideChart`	`hide-chart`	`boolean`
`hideClearButton`	`hide-clear-button`	`boolean`
`hideLegend`	`hide-legend`	`boolean`
`hideSelectButton`	`hide-select-button`	`boolean`
`hideSettingsButton`	`hide-settings-button`	`boolean`
`hideSketchButton`	`hide-sketch-button`	`boolean`
`hideUniformChartScalingToggle`	`hide-uniform-chart-scaling-toggle`	`boolean`
`hideUnitSelector`	`hide-unit-selector`	`boolean`
`highlightEnabled`	`highlight-enabled`	`boolean`
`hoveredChartPosition`	`hovered-chart-position`	`number`
`icon`	`icon`	`string`
`input`		`Graphic`
`label`	`label`	`string`
`position`	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`profiles`		`Collection<ElevationProfileLineGround \| ElevationProfileLineInput \| ElevationProfileLineQuery \| ElevationProfileLineView>`
`progress` readonly		`number`
`referenceElement`	`reference-element`	`HTMLArcgisLinkChartElement \| HTMLArcgisMapElement \| HTMLArcgisSceneElement \| string`
`state` readonly	`state`	`"created" \| "creating" \| "disabled" \| "ready" \| "selected" \| "selecting"`
`uniformChartScaling`	`uniform-chart-scaling`	`boolean`
`unit`	`unit`	`"centimeters" \| "decimeters" \| "feet" \| "imperial" \| "inches" \| "kilometers" \| "meters" \| "metric" \| "miles" \| "millimeters" \| "nautical-miles" \| "us-feet" \| "yards"`
`unitOptions`		`Array<"imperial" \| "metric" \| "millimeters" \| "centimeters" \| "decimeters" \| "meters" \| "kilometers" \| "inches" \| "feet" \| "yards" \| "miles" \| "nautical-miles" \| "us-feet">`

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

effectiveUnits

readonlyProperty

effectiveUnits: EffectiveUnits

Units which have been selected according to the magnitude of the elevations and distances that are to be displayed in the component, according to the selected unit or unit system.

hideChart

Property

hideChart: boolean

Attribute: hide-chart
Default value: false

hideClearButton

Property

hideClearButton: boolean

Attribute: hide-clear-button
Default value: false

hideLegend

Property

hideLegend: boolean

Attribute: hide-legend
Default value: false

hideSelectButton

Property

hideSelectButton: boolean

Attribute: hide-select-button
Default value: false

hideSettingsButton

Property

hideSettingsButton: boolean

Attribute: hide-settings-button
Default value: false

hideSketchButton

Property

hideSketchButton: boolean

Attribute: hide-sketch-button
Default value: false

hideUniformChartScalingToggle

Property

hideUniformChartScalingToggle: boolean

Attribute: hide-uniform-chart-scaling-toggle
Default value: false

hideUnitSelector

Property

hideUnitSelector: boolean

Attribute: hide-unit-selector
Default value: false

highlightEnabled

Property

highlightEnabled: boolean

Whether the graphic used as input is highlighted.

Attribute: highlight-enabled
Default value: true

hoveredChartPosition

Property

hoveredChartPosition: number

The position, in the range [0, 1], being hovered in the graph.

Attribute: hovered-chart-position

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).

input

Property

input: Graphic

The input path along which elevation will be queried in order to generate an elevation profile.

Default value: null

label

Property

label: string

The component's default label.

Attribute: label

position

Property

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

Attribute: position
Default value: "bottom-left"

profiles

Property

profiles: Collection<ElevationProfileLineGround | ElevationProfileLineInput | ElevationProfileLineQuery | ElevationProfileLineView>

Collection of elevation profile lines which are to be generated and displayed in the component's chart.

progress

readonlyProperty

progress: number

The progress, between 0 and 1 of generating all the configured elevation profiles.

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

state

readonly

Property

The component's state. The values mean the following:

disabled - component is being created
ready - component is ready; no path configured and no interactive operation ongoing
creating - user is creating a new input path
created - input path is configured but no interactive operation is ongoing
selecting - user is selecting an existing input path
selected - user selected an existing input path

Attribute: state
Default value: "disabled"

uniformChartScaling

Property

uniformChartScaling: boolean

Whether the chart should use a uniform scale for the X and Y axes.

Attribute: uniform-chart-scaling
Default value: false

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 elevation and distance values.

Attribute: unit

unitOptions

Property

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

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

Slots

No slots to display.

Events

Event	Type
`arcgisPropertyChange`	`CustomEvent<{ name: "state" \| "input" \| "progress" \| "effectiveUnits"; }>`
`arcgisReady`	`CustomEvent<void>`

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "state" | "input" | "progress" | "effectiveUnits"; }>

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 is ready to be interacted with.

Methods

Method	Signature
`componentOnReady`	`componentOnReady(): Promise<void>`
`destroy`	`destroy(): Promise<void>`
`start`	`start(): Promise<void>`
`stop`	`stop(): 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 arcgisElevationProfile = document.querySelector("arcgis-elevation-profile");
document.body.append(arcgisElevationProfile);
await arcgisElevationProfile.componentOnReady();
console.log("arcgis-elevation-profile is ready to go!");

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

start

Method

start(): Promise<void>

Switches to the "creating" state in which the user can draw a new line.

Returns: Promise<void>

stop

Method

stop(): Promise<void>

Stops the creation operation.

Returns: Promise<void>