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> |
Yes indeed and I recall adding display:none
to a specific item was preventing this from happening 99% of the time, but I can't seem to remember which item that was (this is an old Snipplr from 2010 that I only moved to Github recently), sorry :-(
However if possible, you should look into upgrading to version 7 instead of attempting to hack 6.3 because 7 supports touch without hacks and is way faster on iPad than 6.3
Found it: here's what you should add in your CSS for the iPad to stop opening the keyboard: #wl_ve_mapInput{display:none !important}
Hi Cecile,
Thank you so much for this. I can't wait to try out both of your
suggestions. Your gist is also a very helpful resource for me to learn
about touch events and mapping them over to mouse events.
Cheers,
Chris
On Sun, May 27, 2012 at 9:04 PM, Cecile Muller < ***@***.*** > wrote:
Found it: here's what you should add in your CSS for the iPad to stop
opening the keyboard: `#wl_ve_mapInput{display:none !important}`
---
Reply to this email directly or view it on GitHub:
https://gist.github.com/1972969
##
Chris Bratlien
I write code (so you don't have to)
http://chrisbratlien.com | 1-979-229-5685 | skype: chrisbratlien
I'm glad it helped :-)
Thank you!
For one of my web apps I have changed the 'document.addEventListenter' to 'element.addEventListenter' (where 'element' is the map container)
:-)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for writing this. Does your iOS device go into keyboard text-input mode after touchend/mouseup? I'm noticing this on an iPad 3. I haven't tried it on an iPhone yet.