Map only zoomable with certain key combinations?

Question

Seems like my question is as simple as challenging. I've found this page in the API Reference which demonstrates how you can disable default map behaviour.

Disable all zooming on the view | ArcGIS API for JavaScript 4.15

The functionality which we have to achieve in this project is to make the map "zoomable" only by CTRL + Mousewheel. I've disabled the "mousewheel only" functionality as explained in the link above. But how can I add a certain behaviour so that the map is zoomable again, but only by pressing CTRL in combination with the mousewheel.

I'm using JS API 4.15

Thanks in advance for your help!

RobertScheitlin__GISP · Accepted Answer

Christian, Here is the updated sample for that: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Disable all zooming on the view - 4.15</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.15/"></script> <script> var mouseWheelEvt; require(["esri/WebMap", "esri/views/MapView"], function(WebMap, MapView) { var map = new WebMap({ portalItem: { // autocasts as new PortalItem() id: "d5dda743788a4b0688fe48f43ae7beb9" } }); var view = new MapView({ container: "viewDiv", map: map, ui: { components: ["attribution"] } }); view.when(disableZooming); /** * Disables all zoom gestures on the given view instance. * * @param {esri/views/MapView} view - The MapView instance on which to * disable zooming gestures. */ function disableZooming(view) { view.popup.dockEnabled = true; // Removes the zoom action on the popup view.popup.actions = []; // stops propagation of default behavior when an event fires function stopEvtPropagation(event) { event.stopPropagation(); } // exlude the zoom widget from the default UI view.ui.components = ["attribution"]; // disable mouse wheel scroll zooming on the view mouseWheelEvt = view.on("mouse-wheel", stopEvtPropagation); // disable zooming via double-click on the view view.on("double-click", stopEvtPropagation); // disable zooming out via double-click + Control on the view view.on("double-click", ["Control"], stopEvtPropagation); // disables pinch-zoom and panning on the view view.on("drag", stopEvtPropagation); // disable the view's zoom box to prevent the Shift + drag // and Shift + Control + drag zoom gestures. view.on("drag", ["Shift"], stopEvtPropagation); view.on("drag", ["Shift", "Control"], stopEvtPropagation); // prevents zooming with the + and - keys view.on("key-down", function(event) { var prohibitedKeys = ["+", "-", "Shift", "_", "="]; var keyPressed = event.key; if (prohibitedKeys.indexOf(keyPressed) !== -1) { event.stopPropagation(); } if(event.key === 'Control'){ if(mouseWheelEvt){ mouseWheelEvt.remove(); mouseWheelEvt = null; } }else{ if(!mouseWheelEvt){ mouseWheelEvt = view.on("mouse-wheel", stopEvtPropagation); } } }); view.on("key-up", function(event) { if(!mouseWheelEvt){ mouseWheelEvt = view.on("mouse-wheel", stopEvtPropagation); } }); return view; } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍