Navigation Toggle

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

The component's default label.

Attribute

label

The layout direction of the component.

Attribute

layout

Default value

"vertical"

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

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"

Attribute

position

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

The current state of the component.

Attribute

state

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 Navigation Toggle component will be associated with a map or scene component rather than using the view property.

Create a promise that resolves once component is fully loaded.

Example

1
2
3
4
const arcgisNavigationToggle = document.querySelector("arcgis-navigation-toggle");
document.body.append(arcgisNavigationToggle);
await arcgisNavigationToggle.componentOnReady();
console.log("arcgis-navigation-toggle is ready to go!");

Returns

Promise<void>

Permanently destroy the component.

Returns

Promise<void>

Returns

Promise<void>

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

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