You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard
Loading...

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

Sample search results

TitleSample
Loading...