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", () => { 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); }