Skip to content

Instantly share code, notes, and snippets.

@cecilemuller

cecilemuller/_extensions.js

Created March 4, 2012 13:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cecilemuller/1972969 to your computer and use it in GitHub Desktop.
Save cecilemuller/1972969 to your computer and use it in GitHub Desktop.
Download ZIP
Touch support for Bing Maps 6.3 (e.g. for Iphone webapps)
Raw
_extensions.js
/**
* 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);
}
};
Raw
example.html
<!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>
@chrisbratlien
Copy link

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.

@cecilemuller
Copy link
Author

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

@cecilemuller
Copy link
Author

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}

@chrisbratlien
Copy link

chrisbratlien commented May 28, 2012 via email

@cecilemuller
Copy link
Author

I'm glad it helped :-)

@gserg
Copy link

gserg commented Jun 18, 2012

Thank you!

For one of my web apps I have changed the 'document.addEventListenter' to 'element.addEventListenter' (where 'element' is the map container)

@cecilemuller
Copy link
Author

:-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment