Hi Samer,
Simply set the panEventsEnabled to false:
map.panEventsEnabled = true;
Please note that you will lose the capability to pan/zoom the map using touch gestures that way, but the page will remain scrollable, even on map area.
Hi,
Thank you for this – it worked, but only 50%…. meaning I can now scroll through the map to the next section, but at the same time the map still moves as if it’s being panned while I’m scrolling.
It’s a bit strange, you’d have to try it to see…
http://www.wanderluster.net
– scroll down on a mobile device until you see the map, and then you’ll see what I mean.
Hope you can help me find a fix for this!
Thanks!!
Samer
Indeed. You may want to disable panning of the map altogether. To do that simply set dragMap to false:
http://docs.amcharts.com/3/javascriptmaps/AmMap#dragMap
Hi! Thanks for your reply —
Yes, I could disable panning altogether, but only on the mobile device. How can I do that?
I’d like to keep the panning option on desktop, because it currently works just fine.
I would like to have the panning on mobile too eventually — I hope there will be a fix for this in the future?
Thanks!
Samer
Try this:
dragMap: !('ontouchstart' in window);
It should disable pan on touch devices only.
Having able to pan and scroll the page at the same is not possible I’m afraid. How do we know if the user wants to move the map up or scroll the page?
Hi,
Yes – good point, I guess it’ll need to stay disabled on touch devices.
But, the code you gave me – I tried inserting it, but it’s not having an effect. Could you guide me as to where exactly I should insert it? Maybe I’m pasting it in the wrong place….
Thanks!!
Samer
Hello, this may be a related issue, so I thought I’d add this to my reply above….
I just noticed that on my homepage http://www.wanderluster.net, in Internet Explorer and in Firefox, I am not able to scroll past my “Where I’ve Been” (Maps) section on desktop.
It works fine in Chrome, but in IE and Firefox, for some reason the scrolling gets stuck when trying to scroll down over the map section.
Any ideas what’s going on and how to fix?
Thanks!
Samer
The code I suggested should go into your map config. I.e.:
AmCharts.makeChart("mapdiv", {
...
dragMap: !('ontouchstart' in window)
...
});
As for the scroll issue, I’m not sure. Unless you enable scrolling with mouse wheel (which is not the case with your map) the map does not steal scroll events from the page.
However, since your page is not a regular long page, but rather a parallax implementation which taps into scroll events, there might be some nuances. I suppose the scroll events you have registered for your page elements to not extend to dynamically generated content like the map.
I suggest you look into ways to attach those events on the map area after the map initializes.
I hope this helps.
