vertical pan issue with the datamaps library & the zoom feature


I’m journalist working for

I’m using datamaps ( with d3 v3 and the programmatic zoom feature to pan and zoom in a map (

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