Directional Pad

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-directional-pad";

A directional pad (D-Pad) component can be used to control the position and rotation of the map. The D-Pad provides eight directions of movement, a small compass which indicates the current orientation of the map and a slider for rotating the map.

It is also possible to disable the map's rotation controls or change the size of the component.

The Directional Pad component is not supported in 3D.

Demo

Properties

Property	Attribute	Type
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`disabled`	`disabled`	`boolean`
`hideDirectionalButtons`	`hide-directional-buttons`	`boolean`
`icon`	`icon`	`string`
`label`	`label`	`string`
`messageOverrides`		`{ componentLabel?: string \| undefined; northWest?: string \| undefined; north?: string \| undefined; northEast?: string \| undefined; east?: string \| undefined; southEast?: string \| undefined; south?: string \| undefined; southWest?: string \| undefined; west?: string \| undefined; heading?: string \| undefined; resetHeading?: string \| undefined; unsupported?: string \| undefined; }`
`position`	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`referenceElement`	`reference-element`	`ArcgisLinkChart \| ArcgisMap \| ArcgisScene \| string`
`showRotationResetButton`	`show-rotation-reset-button`	`boolean`
`showRotationSlider`	`show-rotation-slider`	`boolean`
`state` readonly	`state`	`"disabled" \| "moving" \| "ready"`
`visualScale`	`visual-scale`	`"l" \| "m" \| "s"`

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 temporary 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

disabled

Property

disabled: boolean

Indicates whether interaction is allowed on the component. When true, this property sets the component to a disabled state to disable any user interaction.

Attribute: disabled
Default value: false

hideDirectionalButtons

Property

hideDirectionalButtons: boolean

Whether to hide directional pad buttons.

Attribute: hide-directional-buttons
Default value: false

icon

Property

icon: string

Icon which represents the component. It is typically used when the component is controlled by another one (e.g. in the arcgis-expand component).

Attribute: icon
Default value: "move"

label

Property

label: string

The component's default label.

Attribute: label

messageOverrides

Property

messageOverrides: {
    componentLabel?: string | undefined;
    northWest?: string | undefined;
    north?: string | undefined;
    northEast?: string | undefined;
    east?: string | undefined;
    southEast?: string | undefined;
    south?: string | undefined;
    southWest?: string | undefined;
    west?: string | undefined;
    heading?: string | undefined;
    resetHeading?: string | undefined;
    unsupported?: string | undefined;
}

Overwrite localized strings for this component

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"

referenceElement

Property

referenceElement: ArcgisLinkChart | ArcgisMap | ArcgisScene | string

Attribute: reference-element

showRotationResetButton

Property

showRotationResetButton: boolean

Whether to display the button to reset the rotation angle. This only takes effect if showRotationSlider is true.

Attribute: show-rotation-reset-button
Default value: false

showRotationSlider

Property

showRotationSlider: boolean

Whether to display the map rotation slider.

Attribute: show-rotation-slider
Default value: false

state

readonly

Property

state: "disabled" | "moving" | "ready"

The current state of the component.

Attribute: state

visualScale

Property

visualScale: "l" | "m" | "s"

Determines the size of directional pad buttons and the slider.

In addition to this parameter, you can set the width on the component container to dictate directional pad size.

Attribute: visual-scale
Default value: "s"

Methods

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

componentOnReady

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component

Returns: Promise<void>

Events

Event	Type
`arcgisPropertyChange`	`{ name: "state"; }`
`arcgisReady`	`undefined`

arcgisPropertyChange

Event

arcgisPropertyChange: { name: "state"; }

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

arcgisReady

Event

arcgisReady: undefined