Handle Touch events for the map

[pwoods25443]

Maps API does not handle touch events as well as we would like. The recommendation from CMU is to handle them ourselves.

From: Paul Dille pdille@andrew.cmu.edu

Yeah, this has been a problem for years with Maps API. Here's one of the bug threads about this, dating back to 2012. At that end of that thread you'll find a potential solution to patching in what you want. Though I haven't tried that one. As Randy said, we implemented the events ourselves for Earth Timelapse. I didn't change anything with the User Agent. What I did was map touch events to mouse events. Yes these are not truly the same, but it works well enough. And this seems to be what people are doing to work around this. So essentially you'd do something as follows. Note that you'll need to handle proper pinch/zoom if you go this route.

function touch2Mouse(e) { var theTouch = e.changedTouches[0]; var mouseEventType; switch(e.type) { case "touchstart": mouseEventType = "mousedown"; break; case "touchmove":
mouseEventType = "mousemove"; // Handle translating/zoom. break; case "touchcancel": case "touchend":
mouseEventType = "mouseup"; // Handle going from 2 fingers to 1 finger pan. break; default:
return; }

var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(mouseEventType, true, true, window, 1, 
                                                            theTouch.screenX, theTouch.screenY, 
                                                            theTouch.clientX, theTouch.clientY, false, 
                                                            false, false, false, 0, null);

theTouch.target.dispatchEvent(simulatedEvent);

} document.addEventListener("touchstart", touch2Mouse, true); document.addEventListener("touchmove", touch2Mouse, true); document.addEventListener("touchend", touch2Mouse, true); document.addEventListener("touchcancel", touch2Mouse, true);

[redhog]

@enriquetuya The above code does not handle pinch zoom. That is way more complicated than just transplanting the above code. Is that part of this ticket?

[enriquetuya]

@redhog I am not sure from where did @pwoods25443 take the information of the description of the ticket.

[enriquetuya]

Outdated, using the new vizz map now.