NavigationToggleViewModel

AMD: require(["esri/widgets/NavigationToggle/NavigationToggleViewModel"], (NavigationToggleVM) => { /* code goes here */ });
ESM: import NavigationToggleVM from "@arcgis/core/widgets/NavigationToggle/NavigationToggleViewModel.js";
Class: esri/widgets/NavigationToggle/NavigationToggleViewModel
Inheritance: NavigationToggleViewModel Accessor
Since: ArcGIS Maps SDK for JavaScript 4.0

Provides the logic for the NavigationToggle widget, which provides two simple buttons for toggling the navigation mode of a SceneView. Note that this is not designed for 2D mouse interaction in a MapView, nor for touch navigation.

navigation-toggle

The default navigation mode of the SceneView is always pan. The various mouse interactions of this mode are outlined here. The alternate navigation mode to toggle to is rotate. This allows the user to rotate the view with a mouse drag and pan the view with a right-click and drag gesture.

See also
Example
// creates a new instance of the NavigationToggle
let navigationToggle = new NavigationToggle({
  viewModel: {
    view: view
  },
  layout: "horizontal"
});

// and adds it to the top right of the view
view.ui.add(navigationToggle, "top-right");

Constructors

NavigationToggleViewModel

Constructor
new NavigationToggleViewModel(properties)
Parameter
properties Object
optional

See the properties for a list of all the properties that may be passed into the constructor.

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
Show inherited properties Hide inherited properties
Name Type Summary Class

The name of the class.

Accessor

The navigation mode of the view.

NavigationToggleViewModel

The state of the widget.

NavigationToggleViewModel

The view associated with the widget.

NavigationToggleViewModel

Property Details

declaredClass

Inherited
Property
declaredClass Stringreadonly
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.7 Accessor since 4.0, declaredClass added at 4.7.

The name of the class. The declared class name is formatted as esri.folder.className.

Property
navigationMode String

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.

Possible Values:"pan" |"rotate"

Default Value:pan

state

Property
state Stringreadonly

The state of the widget.

Possible Values:"disabled" |"ready"

Default Value:disabled

view

Property
view SceneView

The view associated with the widget.

Method Overview

Show inherited methods Hide inherited methods
Name Return Type Summary Class

Adds one or more handles which are to be tied to the lifecycle of the object.

Accessor

Returns true if a named group of handles exist.

Accessor

Removes a group of handles owned by the object.

Accessor

Toggles the navigation mode of the view from pan to rotate or vice versa.

NavigationToggleViewModel

Method Details

addHandles

Inherited
Method
addHandles(handleOrHandles, groupKey)
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, addHandles added at 4.25.

Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

this.addHandles(handle);

// Destroy the object
this.destroy();
Parameters
handleOrHandles WatchHandle|WatchHandle[]

Handles marked for removal once the object is destroyed.

groupKey *
optional

Key identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.

hasHandles

Inherited
Method
hasHandles(groupKey){Boolean}
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, hasHandles added at 4.25.

Returns true if a named group of handles exist.

Parameter
groupKey *
optional

A group key.

Returns
Type Description
Boolean Returns true if a named group of handles exist.
Example
// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}

removeHandles

Inherited
Method
removeHandles(groupKey)
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, removeHandles added at 4.25.

Removes a group of handles owned by the object.

Parameter
groupKey *
optional

A group key or an array or collection of group keys to remove.

Example
obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");

toggle

Method
toggle()

Toggles the navigation mode of the view from pan to rotate or vice versa.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.