Navigation Toggle

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-navigation-toggle";

The Navigation Toggle component can be used to control the navigation mode of a Scene component.

When the navigation mode is set to "pan" (default), the mouse drag gesture pans the view and right-click + drag allows the user to rotate the view. When the navigation mode is set to "rotate", the mouse drag gesture rotates the view and right-click + drag pans the view.

The Navigation Toggle component is only supported in 3D.

Demo

Properties

Property	Attribute	Type
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`icon`	`icon`	`string`
`label`	`label`	`string`
`layout`	`layout`	`"horizontal" \| "vertical"`
`navigationMode`	`navigation-mode`	`"pan" \| "rotate"`
`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`
`state`	`state`	`"disabled" \| "ready"`

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. It is typically used when the component is controlled by another one (e.g. in the arcgis-expand component).

Attribute: icon

label

Property

label: string

The component's default label.

Attribute: label

layout

Property

layout: "horizontal" | "vertical"

The layout direction of the component.

Attribute: layout
Default value: "vertical"

navigationMode

Property

navigationMode: "pan" | "rotate"

The navigation mode of the view. See the table below for a list of possible values.

Possible Value | Description ---------------|------------- pan | The mouse drag gesture pans the view. Right-click + drag allows the user to perform a 3D rotate around the center of the view. rotate | The mouse drag gesture performs a 3D rotate around the center of the view and the right-click + drag gesture pans the view.

Attribute: navigation-mode
Default value: "pan"

position

Property

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

Attribute: position
Default value: "top-left"

referenceElement

Property

referenceElement: ArcgisLinkChart | ArcgisMap | ArcgisScene | string

Attribute: reference-element

state

Property

state: "disabled" | "ready"

Attribute: state
Default value: "disabled"

Methods

Method	Signature
`componentOnReady`	`componentOnReady(): Promise<void>`
`destroy`	`destroy(): Promise<void>`
`toggle`	`toggle(): 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>

toggle

Method

toggle(): Promise<void>

Returns: Promise<void>

Events

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

arcgisPropertyChange

Event

arcgisPropertyChange: { name: "state" | "layout"; }

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

arcgisReady

Event

arcgisReady: undefined

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