How to disable map navigation in the ArcGIS Server JavaScript API v4.x

Question

In the older version 3.x of the ArcGIS Server JavaScript API, it was possible to disable map navigation using disableMapNavigation() as explained in Disabling map in ArcGIS API for Javascript
What is the equivalent for disabling map navigation in version 4.x of the ArcGIS Server JavaScript API? The use-case is to prevent map navigation temporarily, while an external query is running.
The mapView has a navigation property which allows certain types of navigation to be disabled, as in the example at https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=view-disable-navigation, but this doesn't seem to allow all navigation to be disabled.
Eg, even when using:
navigation: {
  gamepad: {enabled: false},
  browserTouchPanEnabled: false,
  momentumEnabled: false,
  mouseWheelZoomEnabled: false
}

the user is able to pan the map with the mouse, zoom by double-clicking, rotate the map using the right-mouse-button, etc.

Dror Bogin · Accepted Answer

It seems to completely disable map navigation (under a condition, like you asked) you would need to stop event propagation from certain events.
view.on(["click", "drag", "double-click", "mouse-wheel", "hold", ], function(event) {
  if(thinking){
    event.stopPropagation();
  }
});

This will stop all of those events, if you want to disable a click or drag event from just the right mouse button (in case you want to disable just rotation for example), then the click,drag and double-click events also have a button property which you can use:
Value   Description
0   left click (or touch)
1   middle click
2   right click
*Taken from the view event documentation
EDIT
After asking about Disabling Shift+Left-click+Drag zooming as well, I went back to the docs and found this example
Apparently you can add the definition of a pressed keyboard key to the event to stop the event from bubbling.
view.on("drag", ["Shift"], function(event) {
  event.stopPropagation();
});

view.on("drag", ["Shift", "Control"], function(event) {
  event.stopPropagation();
});

Stephen Lead · Answer

In addition to Dror's excellent answer, to prevent the user from using the Zoom In/Out buttons you can create a Zoom widget which can then be removed as necessary.
Remove the standard Zoom when instantiating the view using the ui keyword, and don't include the Zoom control:
const view = new MapView({
  container: "viewDiv",
  map: map,
  ui: { components: ["attribution"] }
});

Then add/remove a Zoom control as required:
let zoomControl = new Zoom({
  view: view
});

// Enable zoom
view.ui.add(zoomControl, {
  position: "top-left"
});

// Disable zoom
view.ui.remove(zoomControl);

How to disable map navigation in the ArcGIS Server JavaScript API v4.x

2 Answers

EDIT

Add your own answers!

Ask a Question