Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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

  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.

 // Listen to events that have been disallowed for navigation.
view.on("mouse-wheel", function(e) {
  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", function(e) {
  const { pointerId, pointerType, x, y } = e;
  if (pointerType !== "touch") { return; }
  pointers.set(pointerId, { x, y});
});

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

view.on("pointer-move", function(e) {
  const { pointerId, pointerType, x, y } = e;
  if (pointerType !== "touch") { return; }
  if (pointers.size !== 1) { return; }
  const distance = Math.sqrt(
    Math.pow(x - pointers.get(pointerId).x, 2) +
    Math.pow(y - pointers.get(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 = "";
  }, 1500);
}