Disable mouse-wheel and single-touch navigation

This sample demonstrates how to disable mouse-wheel zooming and single finger panning (for touch devices) on a MapView instance. This can be done by setting the mouseWheelZoomEnabled and browserTouchPanEnabled properties to false on the view's navigation instance.

Disable the mouse-wheel navigation and single finger panning on touch devices

1
2
3
4
5
6
7
8
9
10
11
12
13
  const view = new MapView({
    container: "viewDiv",
    map: new EsriMap({
      basemap: "hybrid"
    }),
    center: [174.062376, -39.355675],
    zoom: 11,
    // Disable mouse-wheel and single-touch map navigation.
    navigation: {
      mouseWheelZoomEnabled: false,
      browserTouchPanEnabled: false
    }
  });

You can display warning messages to your users as they try to use the disabled navigation gestures by listening to mouse-wheel and pointer events on the view.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 // Listen to events that have been disallowed for navigation.
view.on("mouse-wheel", () => {
  warnUser("To zoom in please double click the map. Use zoom in/out buttons.");
});

// Trap attempted single touch panning.
const pointers = new Map(); // javascript map
view.on("pointer-down", (event) => {
  if (event.pointerType !== "touch") {
    return;
  }
  pointers.set(event.pointerId, { x: event.x, y: event.y});
});

view.on(["pointer-up", "pointer-leave"], (event) => {
  if (event.pointerType !== "touch") {
    return;
  }
  pointers.delete(event.pointerId);
});

view.on("pointer-move", (event) => {
  if (event.pointerType !== "touch") {
    return;
  }
  if (pointers.size !== 1) {
    return;
  }
  const distance = Math.sqrt(
    Math.pow(event.x - pointers.get(event.pointerId).x, 2) +
    Math.pow(event.y - pointers.get(event.pointerId).y, 2)
  );
  if (distance < 20) { return; }
  warnUser("Please use two fingers to pan the map.");
});

// Display a warning.
let timeout;
function warnUser(warning) {
  const warningDiv = document.getElementById("warning");
  warningDiv.innerHTML = '<div class="message">' + warning + '</div>';
  warningDiv.style.opacity = 1;
  if (timeout) {
    window.clearTimeout(timeout);
  }
  timeout = window.setTimeout(() => {
    warningDiv.style.opacity = 0;
    warningDiv.innerHTML = "";
  }, 4000);
}

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