Disable all view navigation

This sample demonstrates how to disable all zooming gestures on a MapView instance. While disabling the drag event also disables panning the map with a mouse or touch input, the keyboard (e.g. direction arrows) still work. The following gestures perform zoom actions on the view by default:

• Zoom widget click - zooms in/out
• key-down + - zooms in
• key-down - - zooms out
• mouse-wheel up/down zooms in/out
• double-click - zooms in
• key-down Control + double-click - zooms out
• key-down Shift + drag - zooms in to the drawn extent
• key-down Control + Shift + drag - zooms out from the drawn extent
• drag - Pinching a touch screen zooms in/out

The following sections detail how each of these gestures/widgets can be disabled to prevent any zoom gestures on the view.

Disable the Zoom widget

Remove the Zoom widget from the view's default UI components by excluding the zoom string from the list of default UI widgets. You can do this either in the view's constructor:

1
2
3
4
5
6
7
8
const view = new MapView({
  container: "viewDiv",
  map: map,
  // Exclude the zoom widget from the default UI
  ui: {
    components: ["attribution"]
  }
});

... or after it is ready:

1
view.ui.components = ["attribution"];

Disable the default +/- key-down gestures

To disable zooming with the keyboard, listen to the key-down event and stop the default behavior by calling stopPropagation() on the event object only when the + and - keys are pressed. Since the Shift + = keys also trigger the + key, we disable those as well.

1
2
3
4
5
6
7
view.on("key-down", (event) => {
  const prohibitedKeys = ["+", "-", "Shift", "_", "="];
  const keyPressed = event.key;
  if (prohibitedKeys.indexOf(keyPressed) !== -1) {
    event.stopPropagation();
  }
});

Disable the default mouse-wheel behavior

Simply call stopPropagation() on the mouse-wheel event object to prevent the user from zooming by scrolling the mouse wheel.

1
2
3
view.on("mouse-wheel", (event) => {
  event.stopPropagation();
});

Disable zooming via double-click

The same function used to prevent zooming with the mouse-wheel gesture may be passed to the event listener for double-click to prevent zooming in via double-click.

1
2
3
view.on("double-click", (event) => {
  event.stopPropagation();
});

Add the ["Control"] modifier to prevent zooming out with Control + double-click.

1
2
3
view.on("double-click", ["Control"], (event) => {
  event.stopPropagation();
});

Disable pinch zoom and panning

Stop propagation on the drag event object to disable panning and pinch zoom.

1
2
3
view.on("drag", (event) => {
  event.stopPropagation();
});

Disable the view's zoom box

To prevent the user from zooming in or out by creating a zoom box with Shift + drag or Shift + Control + drag, call the stopPropagation() method of the drag event object with the Shift and Control+Shift modifiers.

1
2
3
4
5
6
7
view.on("drag", ["Shift"], (event) => {
  event.stopPropagation();
});

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