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

Revision: 33759

at October 13, 2010 01:35 by wildpeaks

Updated Code

<script type="text/javascript">
/**
 * 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);
	}
};
</script>




/***********************
 * Example
 **********************/
<!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="snipplet_touch.js"></script>
</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>

Revision: 33758

at October 13, 2010 01:34 by wildpeaks

Updated Code

<script type="text/javascript">
/**
 * 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);
	}
};
</script>




/***********************
 * Example
 **********************/
<!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="snipplet_touch.js"></script>
</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>

Revision: 33757

at October 13, 2010 01:32 by wildpeaks

Updated Code

<script type="text/javascript">
/**
 * 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);
	}
};
</script>




/***********************
 * Example
 **********************/
<!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="snipplet_touch.js"></script>
</head>
<body onload="init();">

	<script type="text/javascript">
	<!-- 
		function init(){
			var map = new VEMap('container');
			map.SetDashboardSize(VEDashboardSize.Tiny);
			map.EnableTouch();
			map.LoadMap();
		}
	//--> 
	</script>
</body>
</html>

Revision: 33756

at October 13, 2010 01:29 by wildpeaks

Initial Code

<script type="text/javascript">
/**
 * 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);
	}
};
</script>




/***********************
 * Example
 **********************/
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
	<script type="text/javascript" src="snipplet_touch.js"></script>
</head>
<body onload="init();">

	<script type="text/javascript">
	<!-- 
		function init(){
			var map = new VEMap('container');
			map.SetDashboardSize(VEDashboardSize.Tiny);
			map.EnableTouch();
			map.LoadMap();
		}
	//--> 
	</script>
</body>
</html>

Initial URL

http://www.wildpeaks.com

Initial Description

**Important: this snipplet has moved to Github.**

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

Initial Title

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

Initial Tags

Initial Language

JavaScript

Choose a language for easy browsing: