10

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.

  • 1
    You could try when you enableMapNavigation to immediately after reinvoke the mouse-drag-startevent. 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. – Branco May 31 '16 at 19:10
2

You never give a reason for using the dis/enableMapNavigation method rather than the dis/enableScrollWheelZoom method. Use the latter.

| improve this answer | |
  • Unfortunately this doesn't work because (1) the default behaviour of the map is to pan (not zoom) when the scroll wheel is used, and (2) map.disablePan(); doesn't apply to the scroll wheel, only drag-to-pan: jsfiddle.net/g7npfuvn/16 – Stephen Lead Jun 1 '16 at 23:09
  • Ah, the problem is that I was testing on a Mac, where smartNavigation takes effect: When true, for Apple computers with a trackpad or magic mouse use, swipe pans instead of zooming. If I set this to false, and test on a PC, it works. So it looks like this is a limitation of the ArcGIS Server JS API on a Mac. – Stephen Lead Jun 1 '16 at 23:17
  • If you set the value to false then you ought to be seeing the same behavior regardless of the os+hardware. Consider listening for a mousemove event and upon detection turning off smartNav, similar to what's been done over here. – Zack Jun 2 '16 at 17:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.