5

We have an issue on mobile which is the user can't keep scrolling if the there is a map on the page and it occupies the whole screen.

Here is the code:

// center of the map
var center = [-33.8650, 151.2094];

// Create the map
var map = L.map('map').setView(center, 3);

// Set up the OSM layer
L.tileLayer(
 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18
}).addTo(map);
// add a marker in the given location
L.marker(center).addTo(map);
map.dragging.disable();
map.tap.enable();

And here is a jsfiddle demo of the problem: https://jsfiddle.net/x5p2nLrs/23/embedded/result/#Result

Can you please let me know If I'm missing something?

3

That is a typical problem that occurs in many websites, unfortunately.

You have a few options:

  1. make the map not take up 100% of the width, so there is a little room on the side so a user can scroll
  2. insert a button (an arrow, for example), positioned somewhere in the map, that lets you jump to the space above/below the map
  3. Yan can set the dragging option to false, as in:

    var map = L.map('map', {dragging: false}).setView(center, 3);
    

But option 3 will always disable it. That might not always be desired. You could even check whether a mobile device is used, and then disable dragging.

| improve this answer | |
3

I would recommend using this options:

var map = L.map('map', { dragging: !L.Browser.mobile, tap: !L.Browser.mobile });

This leads to the most intuitive behaviour I ever found. One finger scrolls page, two fingers control panning and zooming of the map.

| improve this answer | |
1

Copy-pasting from https://github.com/Leaflet/Leaflet/issues/4677:

You can't both scroll the map AND the page. Try disabling scroll: http://leafletjs.com/reference-1.0.0.html#map-scrollwheelzoom

See also http://leafletjs.com/reference-1.0.0.html#map-dragging

| improve this answer | |
  • Yes, disabling the map scrolling didn't change anything. Is the scroll wheel zoom option relevant on mobile devices? – Waseem Abu Senjer Jun 28 '16 at 17:48
  • No. That's why I added a link to the docs about the dragging option. – IvanSanchez Jun 28 '16 at 20:03
  • disabling the dragging option also didn't work, user can't scroll down when touching the map. – Waseem Abu Senjer Jun 28 '16 at 20:18
1

According to an answer from Mourner in Issue #2031 on the Leaflet project:

You can simply set tap: false in the map options.

| improve this answer | |

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.