Skip to content

Instantly share code, notes, and snippets.

@cecilemuller

cecilemuller/_extensions.js

Created March 4, 2012 12:59
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cecilemuller/1972886 to your computer and use it in GitHub Desktop.
Save cecilemuller/1972886 to your computer and use it in GitHub Desktop.
Download ZIP
Animated pushpins in Bing Maps AJAX 6.3
Raw
_extensions.js
/**
* This snipplet adds the following methods:
* VEMap.DropPushpin
* VEShapeLayer.DropPushpin
*
* This is similar to VEMap.AddPushpin except the pin is animated (it "falls" on the map).
*
* Works even in IE6 and the IPhone. Generic solution based on this proof of concept:
* http://www.garzilla.net/vemaps/DropPushPin.aspx
*/
VEMap._droppins = {};
VEMap._droptick = function(id_){
var pin = VEMap._droppins[id_];
pin.x -=10;
pin.y +=10;
pin.icon.style.top = pin.shadow.style.top = pin.y + 'px';
pin.shadow.style.left = pin.x + 'px';
if (pin.y >= 0){
clearInterval(pin.interval);
delete VEMap._droppins[id_];
}
}
VEMap.prototype.DropPushpin = VEShapeLayer.prototype.DropPushpin = function(point_, shadowx_, shadowy_){
var shape = new VEShape(VEShapeType.Pushpin, point_);
shape.SetCustomIcon('<span></span>');
map.AddShape(shape);
var x = 200 + (shadowx_ ? shadowx_ : 0);
var y = -200 + (shadowy_ ? shadowy_ : 0);
var id = shape.GetID();
shape.SetCustomIcon('<div style="position: relative;"><div id="'+id+'_shadow" class="droppin_shadow" style="position: absolute; left: '+x+'px; top: '+y+'px;">&nbsp;</div><div id="'+id+'_icon" class="droppin_icon" style="position: absolute; top: '+y+'px;">&nbsp;</div></div>');
var distance = 170;
var icon = document.getElementById(id + '_icon');
var shadow = document.getElementById(id + '_shadow');
VEMap._droppins[id] = {
icon: icon,
shadow: shadow,
x: x,
y: y
};
VEMap._droppins[id]['interval'] = setInterval('VEMap._droptick("' + id + '")', 10);
return shape;
};
Raw
example.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
<!--
.droppin_icon {
height: 30px;
width: 25px;
background: url('http://www.garzilla.net/vemaps/images/pin.gif') no-repeat 0 0;
cursor: pointer;
}
.droppin_shadow {
height: 30px;
width: 42px;
background: url('http://www.garzilla.net/vemaps/images/pinShadow.gif') no-repeat 0 0;
-moz-user-select: none;
-webkit-user-select: none;
filter: Alpha(opacity=50);
-moz-opacity: 0.60;
opacity: 0.60;
}
-->
</style>
</head>
<body onload="init();">
<script type="text/javascript">
<!--
var map;
function init(){
map = new VEMap('container');
map.LoadMap();
}
//-->
</script>
<button onclick="map.AddPushpin( map.GetCenter() );">Regular pin</button>
<button onclick="map.DropPushpin( map.GetCenter() );">Dropped pin</button>
<button onclick="map.DropPushpin( map.GetCenter(), 11, 0 );">Dropped pin (with a offset on the shadow)</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment