6

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.

1
  • 1
    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.
    – Dror Bogin
    Nov 16, 2020 at 7:00

2 Answers 2

5

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();
});
6
  • edited my answer, added more instructions about ignoring all mouse events
    – Dror Bogin
    Nov 16, 2020 at 6:58
  • 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.
    – Dror Bogin
    Nov 16, 2020 at 9:22
  • 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 Dec 9, 2020 at 1:31
  • 1
    Adding to the answer
    – Dror Bogin
    Dec 9, 2020 at 4:08
  • You are truly the master of finding gold buried in the documentation. Many thanks again Dec 9, 2020 at 5:18
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.