Restore zooming after manual disable

[GregoryBologna]

I found this code to disable zoom. Any idea how restore or undo disable zooming, including removing the stepPropagation event? I checked the events in Chrome dev tools event listeners, but couldn't find it. 

function disableZooming() {
  
  // 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
  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", (event) => {
	const prohibitedKeys = ["+", "-", "Shift", "_", "=", "ArrowUp", "ArrowDown", "ArrowRight", "ArrowLeft"];
	const keyPressed = event.key;
	if (prohibitedKeys.indexOf(keyPressed) !== -1) {
	  event.stopPropagation();
	}
  });
  
}

[Sage_Wall · Accepted solution]

Hi @GregoryBologna,

A simpler approach may be to set constraints on the maximum and minimum zoom values in the view. Then you wouldn't have to worry about the event handlers. A codepen that shows how to do this can be found here: https://codepen.io/sagewall/pen/bGxaOpw

     require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
      const map = new Map({
        basemap: "topo-vector"
      });
      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 10,
        center: [15, 65]
      });
      view.when(() => {
        const zoomContainer = document.getElementById("zoomContainer");
        const zoomSwitch = document.getElementById("zoomSwitch");
        view.ui.add(zoomContainer, "top-right");
        zoomSwitch.addEventListener("calciteSwitchChange", (event) => {
          if (event.target.checked) {
            disableZoom();
          } else {
            enableZoom();
          }
        })
      })
      const disableZoom = () => {
        view.constraints.minZoom = view.zoom;
        view.constraints.maxZoom = view.zoom;
        view.ui.components = ["attribution"]
      }
      const enableZoom = () => {
        view.constraints = {};
        view.ui.components = ["attribution", "zoom"]
      }
    });

[GregoryBologna]

I was at first worried the mouse and keyboard would still zoom with constraints, but now I am using it and it works just right. Thanks.