Hello,
I’m journalist working for wort.lu.
I’m using datamaps (datamaps.github.io/) with d3 v3 and the programmatic zoom feature to pan and zoom in a map (https://www.wort.lu/fr/luxembourg/testdnvid-5864efe253590682caf16f8c).
The map is in a #map layer, and the page is embedded in an iframe.
It’s working quite well in desktop and mobile browsers, but I have a problem with our Android app.
The app (wort.lu) shows the map in a webview but vertical pan is impossible. When trying to map the map, I scroll the whole page.
I’ve added touch-action: none to the #map container and also these two listeners:
document.getElementById(‘map’).addEventListener(‘touchmove’, function(ev) {ev.preventDefault(); ev.stopImmediatePropagation(); }, {passive: false});
document.getElementById(‘map’).addEventListener(‘touchforcechange’, function(ev) {ev.preventDefault(); ev.stopImmediatePropagation(); }, {passive: false});
It helped improved things on iOS 11 and 12, but curiously I can’t solve the vertical pan issue on the Android app.
I would really appreciate any help, if you could have an advice.