Disable mouse-wheel and single-touch navigation

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

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