import "@arcgis/map-components/components/arcgis-navigation-toggle";- Inheritance:
- ArcgisNavigationToggle→
PublicLitElement
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.
Known limitations
Navigation Toggle is only supported in a 3D arcgis-scene component.
@since 4.28
Demo
Properties
| Property | Attribute | Type |
|---|---|---|
auto-destroy-disabled | ||
icon | Icon["icon"] | undefined | |
label | ||
layout reflected | layout | "horizontal" | "vertical" |
| ||
navigationMode reflected | navigation-mode | "pan" | "rotate" |
reference-element | ||
state readonly reflected | state | |
| ||
visual-scale | Button["scale"] |
autoDestroyDisabled
- Type
- 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
- Type
- Icon["icon"] | undefined
Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).
- See also
- Attribute
- icon
navigationMode
- Type
- "pan" | "rotate"
The navigation mode of the view. The possible values:
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"
referenceElement
- Type
- ArcgisReferenceElement | string | undefined
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.
- Attribute
- reference-element
view
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
viewproperty which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-navigation-toggle component will be associated with a map or scene component rather than using theviewproperty.
Methods
| Method | Signature |
|---|---|
componentOnReady inherited | componentOnReady(): Promise<this> |
destroy(): Promise<void> | |
toggle(): Promise<void> |
componentOnReady
- Signature
-
componentOnReady (): Promise<this>
Creates a promise that resolves once the component is fully loaded.
- Returns
- Promise<this>
Example
const arcgisNavigationToggle = document.querySelector("arcgis-navigation-toggle");document.body.append(arcgisNavigationToggle);await arcgisNavigationToggle.componentOnReady();console.log("arcgis-navigation-toggle is ready to go!");Events
| Name | Type |
|---|---|
| CustomEvent<{ name: "layout" | "state"; }> | |
arcgisPropertyChange
arcgisPropertyChange: CustomEvent<{ name: "layout" | "state"; }> Emitted when the value of a property is changed. Use this to listen to changes to properties.
arcgisReady
arcgisReady: CustomEvent<void> Emitted when the component associated with a map or scene view is ready to be interacted with.