Map only zoomable with certain key combinations?

119
1
Jump to solution
05-15-2020 07:12 AM
ChristianBischof
Esri Contributor

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!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

1 Reply
RobertScheitlin__GISP
MVP Esteemed Contributor

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