OSGeo / osgeo

The Open Source Geospatial Foundation is not-for-profit organization to empower everyone with open source geospatial. Directly supports projects as an outreach and advocacy organization providing financial, organizational and legal support. Works with our sponsors and partners for open software, standards, data, research and education.
http://www.osgeo.org
366 stars 67 forks source link

geoforall map interrupts page scroll #150

Closed jodygarnett closed 6 years ago

jodygarnett commented 7 years ago

When scrolling down the following page using the mouse scroll wheel:

The scroll action is captured by the map and used to zoom; making it hard to reach the end of the page!

This is more a challenge on mobile, once your screen enters the map ... you can never leave!

Options:

jeffreylasut commented 7 years ago

@MarvinGI please setup a meeting with @ahocevar to fix this problem.

jodygarnett commented 7 years ago

Looks like this is a one liner: https://gis.stackexchange.com/questions/136782/how-do-i-disable-mouse-scroll-zoom-in-openlayers-3

var map = new ol.Map({
  interactions: ol.interaction.defaults({mouseWheelZoom:false}),
  ...
});
jeffreylasut commented 6 years ago

@jodygarnett This is added to the website http://osgeo.getinteractive.nl/initiatives/geo-for-all/ On desktop this solves the scrolling issues, but not for mobile/tablet.

jodygarnett commented 6 years ago

Okay we need to ask @ahocevar for help

ahocevar commented 6 years ago

Here's a solution that works for both desktop and mobile:


var map = new ol.Map({
  interactions: ol.interaction.defaults({
    mouseWheelZoom:false,
    dragPan: false
  }),
  ...
});

function onMouseMove(e) {
  documnent.removeEventListener('mousemove', onMouseMove, false);
  map.addInteraction(new ol.interaction.DragPan());
}
document.addEventListener('mousemove', onMouseMove, false);

Mobile users will then need two fingers to pan the map, which has become default behaviour in similar apps that use Google Maps as well.

jeffreylasut commented 6 years ago

issue is solved.