Multitouch zoom support in Windows 8 / IE10

[grahamj]

I'm running Windows 8 with IE10 and noticed that multitouch zoom does not work on my multitouch tablet (Asus EP121)

Since I need this to work for a new project, I'm looking into resolving this myself. Any help appreciated though!

[danzel]

The file that handles touchzoom is:
https://github.com/CloudMade/Leaflet/blob/master/src/map/handler/Map.TouchZoom.js

Check whether L.Browser.touch is true and that the touch events are being fired. Otherwise I'm not really sure, all of the other bits should be correct...
Maybe ship me a tablet for testing ;-)

[oliverheilig]

Looked at the TouchZoom implementation under IE10. But unlike #870 this is not as easy to fix. The touchstart event seems to be WebKit only. IE10 needs another family of events http://stackoverflow.com/questions/6986490/will-does-ie10-support-touch-events. So this needs some extra code.

[oliverheilig]

Don't know how to map the MSPointer-event args to the WebKit args. There is an MS howto which explains how to support both IOS and IE10 http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx. I'll take a look at it and try to find out.

But no matter how the IE pinch-zoom would be implemented, it needs an "-ms-touch-action: none" style. I would suggest to add this right now to leaflet.css, as this enables double-tap-zoom and drag-pan with the current version.

.leaflet-container {
overflow: hidden;
outline: 0;
-ms-touch-action: none; // disables the default touch actions for IE10
}

[juhieta]

@oliverheilig good findings!

[mourner]

@oliverheilig thank you for your useful research! We don't have any Win8 devices here to test yet so I have to rely on contributions...

[oliverheilig]

We don't have a touch device either. I'm testing with virtual box and the Windows simulator which comes with VS-Express for Win8 http://msdn.microsoft.com/en-us/library/windows/apps/hh441475.aspx

[danzel]

Will have a play with the sim in the next few days if you don't beat me to it, didn't think they'd have multitouch emulation, good job MS on that one!

[veproza]

Hey guys, I ran into the same trouble and hotfixed it before I saw this discussion (or the issue list in general), and there's a pull request (https://github.com/CloudMade/Leaflet/pull/1019) that has the IE10 multitouch working.

[juhieta]

@veproza sounds amazing, thanks a lot! :) Will test the fix asap.

[danzel]

Thanks for that PR @veproza I learnt a lot from it!
I've gone through and done another pass on this based on your work, instead of putting code in to all of the different touch supporting modules we make L.DomEvent emulate the touch* events if msPointer is detected.

If anyone who wants this could please go take a look and test it, It would be much appreciated!:
https://github.com/danzel/Leaflet/tree/ie10

I've put a built test online here:
https://dl.dropbox.com/u/29953/ie10touchtest/map-mobile.html

[oliverheilig]

@danzel very nice! Tested it on an actual tablet and it works. But somehow i manage to bring the map into an inconsistent state when i touch wildly. Especially if the map doesn't run full screen like in your sample but within a panel of a metro app. I guess your touch-count doesn't work always correctly. Maybe you also have to consider MSPointerCancel, MSPointerOut, ...

[danzel]

Yeah I think MSPointerCancel is probably the one, will update it today for another test.

[danzel]

Pushed addition of MSPointerCancel and updated the test site.
I couldn't get the event to fire on the simulator, so please do another test on the device.

I also found what I hope is just a bug in the simulator:

Place 2 fingers on the device (using the pinch zoom/touch mode option), move them to the edge of the screen so that one goes off and the Up event is fired.
You end up getting this:

MSPointerDown pointerId: 1
MSPointerDown pointerId: 2 (Different ids for each touch as expected)
...Moves...
MSPointerUp pointerId: 1
MSPointerUp pointerId: 1 (Both up events have the same pointerId)

Then you can get out the single touch tool and drag it around on the map for a random touch-zoom animation.