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.

[oliverheilig]

Sorry to say this, but i can reproduce exactly the same behavior on an actual touch device. Set two finger on the device and move them outside -> i'm in a one-finger pinch-mode.

[danzel]

FFFFFFFFUUUUUUU IE10. Will do some investigation.

[danzel]

Can't find anything on google about this.

Have pushed a hopeful fix (sample updated too). If there is a MSPointerUp with a pointerId that we don't know about then we nuke all of the touch events. This sorts it in the simulator, please test on device!

[oliverheilig]

I still can provoke inconsistencies. Another issue is that i sometimes get an 'Invalid calling object' in DomEvent:stopPropagation. Maybe i can dive deeper into it next week and add some log output.

[danzel]

Do you have a reliable way to get in to an inconsistent state? (Like the one I posted above)

[oliverheilig]

No, i don't see any pattern. I cannot reproduce the behavior you postet before anymore, but after a while of heavy touching i get either the "invalid calling object" exception or i stay i a pinch-mode with one finger. Another issue is that the double-tap zoom doesn't work reliable. I'm testing with a Viewsonic Viewpad 10 and Leaflet hostet within a Windows 8 Metro app. But i think these are generic IE10 touch issues which affect any IE10/touch environment.

[danzel]

A stack trace from "invalid calling object" would be useful if you could get one please.

[veproza]

@danzel Nice job! I've gotten some time again, and I have spotted an issue with clicking on overlays/markers in IE, that it mostly does not register properly. Works in simulator, breaks on real (possibly only low-performance) machines.
From what I have found, this behavior is caused by failing to simulate click event in Draggable.js. Also, it can be hotfixed by changing _onMove function, by setting it to be triggered only after movement >= TAP_TOLERANCE. I hope to look into it more tomorrow.
The invalid calling object: I have found it to be called by double-clicking a marker (possibly expandable to any clickable overlay). In DomEvents, method stopPropagation. Stack trace
invalid calling object at stopPropagation (line with e.stopPropagation();)
at _fireMouseEvent (Marker.js:203)
at handler (DomEvent, somewhere - stack ends there. Gotta love IE)
Possibly some bug within a custom double click event, if Leaflet has one?

[veproza]

Got it working and could not get it into any inconsistent states anymore. See commits
https://github.com/veproza/Leaflet/commit/ec2989e1331ded00d6dfd97263cba75e95d19f08 and https://github.com/veproza/Leaflet/commit/b7e84aed9b77c51e2a4698251bf38ccf46b82dc7 .
Can anyone check it?

[oliverheilig]

@veproza thanks, going to test it on monday on an actual tablet when i'm back in office.

[danzel]

Awesome @veproza Have pulled both of those in to my branch.

I've tidied up the click simulation a bit. We need to fire the dragend event (as we've fired dragstart). I think it makes sense to fire the click event after the drag finishes too.

Have updated my debug page with these changes.

[oliverheilig]

Hey guys, it's getting better and better. There's only one more issue i can easily reproduce.

• Drag from inside the map to the outside
• => double-tap zoom is broken

I have a test with the latest version from @danzel running

http://80.146.239.139/VectorTest/ie10test.html

[danzel]

While investigating the touch and drag off bug I discovered some stupid things I was doing with addEventListener. I've fixed these up (which let me get rid of the losing touches hack) and have fixed up touch and drag off too.
Updated bits in all the usual places, give them a go please, we might finally be there! :-)

[mourner]

Really great work guys! Keep it up!

[oliverheilig]

@danzel I've updated my sample at http://80.146.239.139/VectorTest/ie10test.html and it works flawless! But i have an issue when running inside a Metro App. When i push a zoom button i get an exception 'Property "0" of an undefined object cannot be called' inside onTouchStart(e) of DomEvent.DoubleTap.js at touch = e.touches[0]; I can only reproduce this behavior inside a metro app but not inside the browser.

[oliverheilig]

I've hotfixed it for my tests in DomEvent.DoubleTap.js

        function onTouchStart(e) {
            if (!(e.touches) || e.touches.length === 0) {
                return;
            }

This fixes the problem. But i spotted another issue which can be reproduced on http://80.146.239.139/VectorTest/ie10test.html

• Put 2 fingers inside the map
• Move them outside the map
• => i'm in a one finger pinch-zoom mode.

[danzel]

If I go off the left side of the map it doesn't break, but going off the left it does, ha! Will fix up now if I can figure it out

[danzel]

Alright, both of those are fixed up proper now. I (again) think we should be all good!
The DoubleTap one reproduced in my browser so long as you touched zoom in first.

[oliverheilig]

@danzel @veproza: Tested the latest version both as Website and inside a Metro App. Now everything works as expected. Thank you for your awesome work! This makes Leaflet the #1 map control for Win8 app development!

[mourner]

Woot! @danzel, feel free to merge into master then.

[danzel]

Awesome, will look at merging later today :-)

[danzel]

Have landed my changes in leaflet master. (Changelog and build updated too.)
A huge thank you to everyone for your help. Please continue testing and tell me everything I've broken :-)

[mourner]

So this is considered clsed, right? Really awesome work guys, thanks a lot!

[danzel]

Oh whoops, must of missed the button :-)

[juhieta]

Hi guys, you have done amazing work! I now tested the map on Windows 8 tablet (Acer Iconia TAB W500) and in general the zooming works really well.

I noticed however one glitch:

When ending multitouch zoom, the map regularly "jumps" a bit before drawing the correct zoom level. When I tested it in Chrome browser on same device, the map smoothly moves to the correct zoom level. I recorded a screencast of the problem. In the video, the problem is not so clearly visible (as the video is not as fluent as actual device). In the video, I first zoom in and out with Chrome, then with IE 10 and then again with Chrome. As you hopefully can see, in Chrome the zoom end is smooth, but with IE 10, the zoom end "jumps" in most of the cases. The video is here:

http://www.screencast.com/t/JkwCfKhuSJ

Any idea what could cause this?

[danzel]

That is a bit weird. I can reproduce this locally occasionally. Seems to only happen on a touch-zoom-in, but not on a touch-zoom-out or any other zoom.
Will investigate sometime this week.

[juhieta]

True, seems to be limited to zoom in..