Created
March 4, 2012 13:23
-
-
Save cecilemuller/1972969 to your computer and use it in GitHub Desktop.
Touch support for Bing Maps 6.3 (e.g. for Iphone webapps)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Adds pan and zoom support for touch-based devices. | |
* Works best with fixed-size viewports, however VEMap.ZoomIn & VEMap.ZoomOut | |
* are very unreliable on the IPhone, you should keep the mini dashboard as a fallback. | |
*/ | |
VEMap.prototype.EnableTouch = function(){ | |
if (typeof Touch == "object"){ | |
var map = this; | |
// 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"}; | |
// One finger interaction | |
var ontouch = function(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 | |
var ongesture = function(e){ | |
e.preventDefault(); | |
switch(e.type){ | |
case "gesturestart": | |
gesture = true; | |
break; | |
case "gestureend": | |
gesture = false; | |
if (e.scale > 1){ | |
map.ZoomIn(); | |
} else if (e.scale < 1){ | |
map.ZoomOut(); | |
} | |
break; | |
} | |
} | |
// 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 | |
document.addEventListener("touchstart", ontouch, true); | |
document.addEventListener("touchmove", ontouch, true); | |
document.addEventListener("touchend", ontouch, true); | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<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;" /> | |
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script> | |
<script type="text/javascript" src="_extensions.js"></script> | |
<style>#wl_ve_mapInput{display:none !important}</style> | |
</head> | |
<body onload="init();"> | |
<div id="container" style="width: 256px; height: 200px; position: relative;"></div> | |
<script type="text/javascript"> | |
<!-- | |
function init(){ | |
var map = new VEMap('container'); | |
map.SetDashboardSize(VEDashboardSize.Tiny); | |
map.EnableTouch(); | |
map.LoadMap(); | |
} | |
//--> | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
:-)