This sample demonstrates how to disable all zooming and navigation gestures on a Map component. While disabling the arcgisViewDrag 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:

• 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 can be disabled to prevent any zoom gestures on the view.

Disable the default +/- key-down gestures

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

viewElement.addEventListener("arcgisViewKeyDown", (event) => {
  const prohibitedKeys = ["+", "-", "Shift", "_", "="];
  const keyPressed = event.detail.key;
  if (prohibitedKeys.indexOf(keyPressed) !== -1) {
    event.detail.stopPropagation();
  }
});

Disable the default mouse-wheel behavior

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

viewElement.addEventListener("arcgisViewMouseWheel", (event) => {
  event.detail.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 arcgisViewDoubleClick to prevent zooming in via double-click.

viewElement.addEventListener("arcgisViewDoubleClick", (event) => {
  event.detail.stopPropagation();
});

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

viewElement.addEventListener("arcgisViewDoubleClick", ["Control"], (event) => {
  event.detail.stopPropagation();
});

Disable pinch zoom and panning

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

viewElement.addEventListener("arcgisViewDrag", (event) => {
  event.detail.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 arcgisViewDrag event detail object with the Shift and Control+Shift modifiers.

viewElement.addEventListener("arcgisViewDrag", ["Shift"], (event) => {
  event.detail.stopPropagation();
});

viewElement.addEventListener("arcgisViewDrag", ["Shift", "Control"], (event) => {
  event.detail.stopPropagation();
});