NavigationToggleViewModel | API Reference | ArcGIS Maps SDK for JavaScript 4.33

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

NavigationToggle widget - Deprecated since 4.32. Use the Navigation Toggle component instead.
SceneView navigation
Programming patterns: Widget viewModel pattern

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 Watch for changes topic.

Show inherited properties

Hide inherited properties

Type	Summary	Class
String	The name of the class.	Accessor
String	The navigation mode of the view.	NavigationToggleViewModel
String	The state of the widget.	NavigationToggleViewModel
SceneView\|null\|undefined	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.

navigationMode 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 |null |undefined

The view associated with the widget.

Method Overview

Show inherited methods

Hide inherited methods

Return Type	Summary	Class
	Adds one or more handles which are to be tied to the lifecycle of the object.	Accessor
Boolean	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.