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:

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

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

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close