Select to view content in your preferred language

Zoom protection while scrolling/swiping a webpage with an integrated map

569
2
05-03-2022 12:19 AM
nadja
by
Frequent Contributor

We need to implement a zoom-protection for (not full-size) maps on webpages while scrolling. Without this protection, currently the users get annoyed when navigating on webpages with small maps. Instead of scrolling down a page, they end up zooming into the map. It's more than understandable that this is annoying especially on webpages where the scrollale frame around the webmap is rather small.

Almost the desired behaviour is demonstrated in this (Google Maps based) application: https://www.strittmatter-partner.ch/unternehmen/standorte

We found this sample code: https://totalapis.github.io/sample-code/view-disable-scroll-zoom/index.html

What we're missing in this sample code is:

1. the same zoom-protection for the mobile map. Currently, if this sample code is opened on a mobile device, the map can be scrolled using the usual swipe gesture. Since the swiping is the mobile equivalent of scrolling, we would expect (and want) it to work there similarly. is this possible? and how?

2. an informative message displayed on the map on how to enable/activate the zoom by scrolling/swiping functionality. Ideally, we'd like to activate the full functionality of the map by clicking (for desktop)/tapping (for mobile) the map. Is this possible? And how?
Alternatively, we could imagine to use the "google-solution" with Ctrl+scrolling (desktop) / swiping with two fingers (mobile) for maps which are not full size. 

thank you in advance!

Tags (3)
0 Kudos
2 Replies
ReneRubalcava
Honored Contributor

Is something like this what you're looking for?

https://developers.arcgis.com/javascript/latest/sample-code/view-disable-zoom/

StoryMaps uses this.

0 Kudos
nadja
by
Frequent Contributor

Thank you for sharing this sample code. It's not quite what I was looking for in the desktop version, but it is for the mobile version! 🙂

0 Kudos