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