Advanced Search

VEMap.EnableTouch: Touch support for Bing Maps AJAX mapcontrol (e.g. IPhone webapps)

/ Published in: JavaScript
Save to your folder(s)
**Important: this snipplet has moved to Github.**

- [Touch support for Bing Maps 6.3 (e.g. for Iphone webapps)](https://gist.github.com/1972969)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript">
  2. /**
  3.  * Adds pan and zoom support for touch-based devices.
  4.  * Works best with fixed-size viewports, however VEMap.ZoomIn & VEMap.ZoomOut
  5.  * are very unreliable on the IPhone, you should keep the mini dashboard as a fallback.
  6.  */
  7. VEMap.prototype.EnableTouch = function(){
  8. 	if (typeof Touch == "object"){
  9. 		var map = this;
  10.  
  11. 		// Whether a gesture is being performed currently or not.
  12. 		var gesture = false;
  13.  
  14. 		// Translates touch event names into similar mouse event names
  15. 		var touch2mouse = {"touchstart": "mousedown", "touchmove": "mousemove", "touchend": "mouseup"};
  16.  
  17. 		// One finger interaction
  18. 		var ontouch = function(e){
  19. 			var touches = e.changedTouches;
  20. 			if ((!gesture) && (touches.length == 1)){
  21. 				if (e.type == "touchmove") e.preventDefault();
  22. 				var obj = touches[0];
  23. 				var e2 = document.createEvent("MouseEvent");
  24. 				e2.initMouseEvent(touch2mouse[e.type], true, true, window, 1, obj.screenX, obj.screenY, obj.clientX, obj.clientY, false, false, false, false, 0, null);
  25. 				obj.target.dispatchEvent(e2);
  26. 			}
  27. 		}
  28.  
  29. 		// Two fingers interaction
  30. 		var ongesture = function(e){
  31. 			e.preventDefault();
  32. 			switch(e.type){
  33. 				case "gesturestart":
  34. 					gesture = true;
  35. 				break;
  36. 				case "gestureend":
  37. 					gesture = false;
  38. 					if (e.scale > 1){
  39. 						map.ZoomIn();
  40. 					} else if (e.scale < 1){
  41. 						map.ZoomOut();
  42. 					}
  43. 				break;
  44. 			}
  45. 		}
  46.  
  47. 		// Zooms the map using touch-pinch
  48. 		document.addEventListener("gesturestart", ongesture, true);
  49. 		document.addEventListener("gesturechange", ongesture, true);
  50. 		document.addEventListener("gestureend", ongesture, true);
  51.  
  52. 		// Pans the map using touch-drag
  53. 		document.addEventListener("touchstart", ontouch, true);
  54. 		document.addEventListener("touchmove", ontouch, true);
  55. 		document.addEventListener("touchend", ontouch, true);
  56. 	}
  57. };
  58. </script>
  59.  
  60.  
  61.  
  62.  
  63. /***********************
  64.  * Example
  65.  **********************/
  66. <!DOCTYPE html>
  67. <html>
  68. <head>
  69. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  70. 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
  71. 	<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
  72. 	<script type="text/javascript" src="snipplet_touch.js"></script>
  73. </head>
  74. <body onload="init();">
  75.  
  76. 	<div id="container" style="width: 256px; height: 200px; position: relative;"></div>
  77.  
  78. 	<script type="text/javascript">
  79. 	<!-- 
  80. 		function init(){
  81. 			var map = new VEMap('container');
  82. 			map.SetDashboardSize(VEDashboardSize.Tiny);
  83. 			map.EnableTouch();
  84. 			map.LoadMap();
  85. 		}
  86. 	//--> 
  87. 	</script>
  88. </body>
  89. </html>

URL: http://www.wildpeaks.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.