MapBox Scrolling on Touch

Question

I am trying to implement a MapBox on a layout that fills 100% of the page. I turned off the map zoom settings, but problems arise when trying to scroll on touch devices where the map fills the viewport. Can I override this or use the browser as an image?

Answer 1

This example has been improved: missing line:

if (map.tap) map.tap.disable();

This will cause the card to not be able to kill events on touch devices.

Answer 2

Yes, you can stop Mapbox listeners from preventing default actions by setting the flyer function to do nothing:

 L.DomEvent.preventDefault = function(e) {return;} 

To remove the outline placed around the element by the browser, which otherwise would have been prevented, you can add:

 *:focus { outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; } 

This allowed me to scroll through the touch devices, although I only tested on Android. Please note that this may have other consequences for your application - this can probably be prevented by going to mapbox.js and removing this call only from those listeners that you need.

Answer 3

Remove the rest of the listeners as in this example - the one you probably still have is dragging .

Answer 4

try adding

 if (map.tap) map.dragging.disable(); 

Answer 5

For those who want to dynamically enable / disable scrolling / zooming of map boxes, etc. depending on the page size (like me), you can try:

 $(document).ready(function() { $(window).on('resize', updateMap); }); function updateMap() { var width = $(window).width(); if (width < 768) { map.scrollWheelZoom.disable(); map.doubleClickZoom.disable(); map.dragging.disable(); if (map.tap) map.tap.disable(); } else { map.scrollWheelZoom.enable(); map.doubleClickZoom.enable(); map.dragging.enable(); if (map.tap) map.tap.enable(); } } 

Replace 768 with the appropriate magic number for your layout. Assumes jQuery.

Answer 6

The problem with the dragging parameter in mapbox is that it controls dragging and holding with the mouse or other pointing device and moving the movement with a touch. Not sure if any other answers make this clear as the main issue.

The heart of the problem that I think OP is working with is that we all look like click drag and drop and find it easy to use, but we don’t like drag and drop because it prevents the page from scrolling.

This is the line of code in which I ended up using. It depends on Modernizr and jQuery, but you could write something like this without them if you need to.

 // disable dragging the map on touch devices only if ($('html').hasClass('touch')) map.dragging.disable();