Very simple map app.
map.js
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
var map = new Map({
basemap: "streets-navigation-vector"
});
var view = new MapView({
container: "mapDiv",
map: map,
center: [-98.5420115, 39.2241764],
zoom: 3
});
});
index.html
<head>
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css">
</head>
<style>
html, body, mapDiv {
padding: 0;
margin: 0;
min-height: 25rem;
width: 100vw;
}
</style>
<body>
<div id="mapDiv"></div>
// Lots of other content...
<script src="https://js.arcgis.com/4.12/"></script>
<script src="map.js"></script>
</body>
So you've got a 100% wide map div, which is not very tall at the top of the page, Then a bunch of content underneath it. Think OpenData UI. Very much like that.
Now, when a user lands on the page, they hit their mouse-wheel and want to scroll the page. Well, the map starts zooming because the mapDiv is at the top of the page and 100% wide, so odds are very good that the user's cursor is on top of the map, giving it focus.
Okay, let's disable that...
map.js
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
var map = new Map({
basemap: "streets-navigation-vector"
});
var view = new MapView({
container: "mapDiv",
map: map,
center: [-98.5420115, 39.2241764],
zoom: 3
});
view.on("mouse-wheel", function(event) {
view.stopPropogation();
});
});
This solves the problem but creates two additional issues.
1. Now, the user can't zoom the map with their mouse wheel at all. Also, this does nothing for touch devices where the user might swipe to try to scroll the page. In that case, swiping on the map pans it, another unintended interaction.
2. When the user uses their mouse wheel to scroll, since they are likely hovering over the map when using their mouse wheel (given its prominent size and position on the page), the page doesn't scroll because the event is being sent to the mapDiv which is stopping the propagation to prevent the map from zooming and the mouse-wheel event never gets sent to the page body to scroll the page.
The assumption is that the user wants to scroll the page when they interact with the mouse-wheel, and if they want to interact with the map, they'll give it focus by clicking or tapping on it.
So given the above assumption, how does one disable all map interactions until the viewer expressly clicks/taps on the map to give it focus, and when that happens enable all of the interactions methods and then turn them back off again when the map loses focus by the user clicking or tapping outside of the mapDiv?
