Hi,
Since IOS 10 user-scalable=no no longer works in the viewport meta tag.
This obviously breaks maps as pinch zooming zooms the whole page, not just the map.
I couldn't find any workarounds - does anyone have any?
Thanks,
Nick
Solved! Go to Solution.
Hi Nick,
I have the same behavior with Api v4 and iOS 10... After looking at others smart mapping API :-), they use a listener on the documentElement to catch the zoomPinch and double tap events and stop them.
A guy post a similar solution on StackOverflow and you could easily implement it in a dojo module like that :
SO link : http://stackoverflow.com/a/38573198/3366795
Sample dojo module :
/** * Created by tony on 28/11/2016. */ define([ "dojo/sniff", "dojo/domReady!" ], function ( sniff ) { if (sniff('ios')) { //Disable pinch zoom on document document.documentElement.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }, false); //Disable double tap on document var lastTouchEnd = 0; document.documentElement.addEventListener('touchend', function (event) { var now = (new Date()).getTime(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now; }, false); } }); //# sourceURL=vmv/mobileBehaviors.js
Good luck !
Hi Nick,
I have the same behavior with Api v4 and iOS 10... After looking at others smart mapping API :-), they use a listener on the documentElement to catch the zoomPinch and double tap events and stop them.
A guy post a similar solution on StackOverflow and you could easily implement it in a dojo module like that :
SO link : http://stackoverflow.com/a/38573198/3366795
Sample dojo module :
/** * Created by tony on 28/11/2016. */ define([ "dojo/sniff", "dojo/domReady!" ], function ( sniff ) { if (sniff('ios')) { //Disable pinch zoom on document document.documentElement.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }, false); //Disable double tap on document var lastTouchEnd = 0; document.documentElement.addEventListener('touchend', function (event) { var now = (new Date()).getTime(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now; }, false); } }); //# sourceURL=vmv/mobileBehaviors.js
Good luck !
Hi Tony,
Thanks heaps for this! I'll give it a try when I get a chance and report back how it goes.
Nick
Hi Tony,
Just had a chance to try this out and it is working well, thanks again!
I also have an absolutely positioned menu system on top of the map. I added the below to stop the menus from bouncing around when panning the map.
//disable scroll on the map containers so the menu doesn't bounce around when panning the map
let mapContainers = document.querySelector(".view");
mapContainers.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);