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.
enableMapNavigation
to immediately after reinvoke themouse-drag-start
event. I found dojotoolkit.org/reference-guide/1.10/dojo/Evented.html as a dojo class to emit events. So you would drag(or click) on the map -> enable map navigation -> in same function invoke the drag event (might be able to just invoke or might require params) -> go about your business dragging. It may be able to pick up on the mouse down and drag with it. Might just be a combo of trying those events out in different orders, etc.