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: This was a very interesting subject to study, it's weird that the option to completely disable navigation was removed with the new API version.

Answer 1

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();
});

• Dror Bogin: edited my answer, added more instructions about ignoring all mouse events
• Dror Bogin: Yeah, I know, I added that because you wanted to turn the navigation on and off. otherwise you can just create a non interactive map with turning all map events off.
• Stephen Lead: I just noticed that this doesn't prevent Shift+Left-click+Drag: Zoom to extent of drawn graphic (developers.arcgis.com/javascript/latest/api-reference/…) Any further suggestions? Thanks codepen.io/slead/pen/poEEjwZ
• Dror Bogin: Adding to the answer
• Stephen Lead: You are truly the master of finding gold buried in the documentation. Many thanks again

Answer 2

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