I was trying to make Bing Maps's VEMap compatible with touch devices, in particular the iphone / webkit mobile.
In the following example, this works: - pan using one finger - zoom in/out using pinch (two fingers)
However if I put both in the same time, then the zoom doesn't work anymore: you can see in the console that VEMap.ZoomIn() or VEMap.ZoomOut() are called, but nothing happens (no error, exception or anything, it just doesn't do anything).
There most likely exists a solution given http://www.bing.com/maps handles both touch and gesture fine, but that code is compressed, so I'm stumped so far, so any idea would be a huge help.
<!DOCTYPE html>
<html>
<head>
<title>VEMap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3&mkt=en-us"></script>
</head>
<body onload="init()">
<div id="mymap" style="position: relative; width: 256px; height: 256px;"></div>
<script type="text/javascript">
// Reference to the VEMap
var map = null;
// Whether a gesture is being performed currently or not.
var gesture = false;
// Translates touch event names into similar mouse event names
var touch2mouse = {"touchstart": "mousedown", "touchmove": "mousemove", "touchend": "mouseup"};
// Initializes the map and adds the touch/gesture listeners
function init(){
map = new VEMap('mymap');
map.HideDashboard();
map.LoadMap(new VELatLong(51.64, -0.18), 9, VEMapStyle.Road);
if (typeof Touch == "object"){
// Zooms the map using touch-pinch
document.addEventListener("gesturestart", ongesture, true);
document.addEventListener("gesturechange", ongesture, true);
document.addEventListener("gestureend", ongesture, true);
// Pans the map using touch-drag
// If you comment out these three lines, pinch-zoom works :(
document.addEventListener("touchstart", ontouch, true);
document.addEventListener("touchmove", ontouch, true);
document.addEventListener("touchend", ontouch, true);
}
}
// One finger interaction
function ontouch(e){
var touches = e.changedTouches;
if ((!gesture) && (touches.length == 1)){
if (e.type == "touchmove") e.preventDefault();
var obj = touches[0];
var e2 = document.createEvent("MouseEvent");
e2.initMouseEvent(touch2mouse[e.type], true, true, window, 1, obj.screenX, obj.screenY, obj.clientX, obj.clientY, false, false, false, false, 0, null);
obj.target.dispatchEvent(e2);
}
}
// Two fingers interaction
function ongesture(e){
e.preventDefault();
switch(e.type){
case "gesturestart":
gesture = true;
break;
case "gestureend":
gesture = false;
if (e.scale > 1.2){
console.log('Attempting to zoom IN.');
map.ZoomIn();
} else if (e.scale < 0.8){
map.ZoomOut();
console.log('Attempting to zoom OUT.');
}
break;
}
}
</script>
</body>
</html>