Map only zoomable with certain key combinations?

ChristianBischof · ‎05-15-2020

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 · ‎05-15-2020

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎05-15-2020

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍