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:

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:

Use dark colors for code blocksCopy
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:

Use dark colors for code blocksCopy
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.

Use dark colors for code blocksCopy
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.

Use dark colors for code blocksCopy
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.

Use dark colors for code blocksCopy
1
2
3
view.on("double-click", (event) => {
  event.stopPropagation();
});

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

Use dark colors for code blocksCopy
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.

Use dark colors for code blocksCopy
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.

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

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

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.