When an HTML page contains a map, and the user scrolls down the page using their mouse wheel, when the user's mouse passes over the map the page will stop scrolling while the map itself will pan. See Demo1.
I would like to emulate the behaviour detailed at A simple usability trick for Google Maps using the ArcGIS Server JS API 3.x.
That is, the page should scroll unless the user explicitly drags within the map, in which case the map should pan.
The behaviour is almost there in Demo2, where the page scrolls even if your mouse is over the map.
map.on("load", function(){
// Disable navigation by default, so scrolling the page doesn't scroll the map
map.disableMapNavigation();
// When the user tries to pan the map, allow this
map.on('mouse-drag-start', function(){
map.enableMapNavigation();
});
// Restore the no-scroll behaviour when the mouse leaves the map
map.on('mouse-out', function(){
map.disableMapNavigation();
});
});
However, the map pan is not enabled unless you first click once within the map, release the mouse button, and then pan. Is it possible to achieve the seamless effect shown with Google Maps in the blog post?
I tried the mouse-drag
, mouse-drag-start
and mouse-down
events but the behaviour is the same for all events.
Best Answer
You never give a reason for using the dis/enableMapNavigation method rather than the dis/enableScrollWheelZoom method. Use the latter.