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.

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

  • 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.

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.