Advanced Search

VEMap.DropPushpin: Create animated pins in Bing Maps

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

- [Animated pushpins in Bing Maps AJAX 6.3](https://gist.github.com/1972886)

----

Works even in IE6 and the IPhone. Generic solution based on this [proof of concept](http://www.garzilla.net/vemaps/DropPushPin.aspx).

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript">
  2. /**
  3.  * This snipplet adds the following methods:
  4.  *   VEMap.DropPushpin
  5.  *   VEShapeLayer.DropPushpin
  6.  * 
  7.  * This is similar to VEMap.AddPushpin except the pin is animated (it "falls" on the map).
  8. **/
  9. VEMap._droppins = {};
  10. VEMap._droptick = function(id_){
  11. 	var pin = VEMap._droppins[id_];
  12. 	pin.x -=10;
  13. 	pin.y +=10;
  14.  
  15. 	pin.icon.style.top = pin.shadow.style.top = pin.y + 'px';
  16. 	pin.shadow.style.left = pin.x + 'px';
  17.  
  18. 	if (pin.y >= 0){
  19. 		clearInterval(pin.interval);
  20. 		delete VEMap._droppins[id_];
  21. 	}
  22. }
  23. VEMap.prototype.DropPushpin = VEShapeLayer.prototype.DropPushpin = function(point_, shadowx_, shadowy_){
  24. 	var shape = new VEShape(VEShapeType.Pushpin, point_);
  25. 	shape.SetCustomIcon('<span></span>');
  26. 	map.AddShape(shape);
  27.  
  28. 	var x = 200 + (shadowx_ ? shadowx_ : 0);
  29. 	var y = -200 + (shadowy_ ? shadowy_ : 0);
  30. 	var id = shape.GetID();
  31. 	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>');
  32.  
  33. 	var distance = 170;
  34. 	var icon = document.getElementById(id + '_icon');
  35. 	var shadow = document.getElementById(id + '_shadow');
  36. 	VEMap._droppins[id] = {
  37. 		icon: icon,
  38. 		shadow: shadow,
  39. 		x: x,
  40. 		y: y
  41. 	};
  42. 	VEMap._droppins[id]['interval'] = setInterval('VEMap._droptick("' + id + '")', 10);
  43.  
  44. 	return shape;
  45. };
  46. </script>
  47.  
  48.  
  49.  
  50. /***********************
  51.  * Example
  52.  **********************/
  53. <!DOCTYPE html>
  54. <html>
  55. <head>
  56. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  57. 	<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
  58. 	<script type="text/javascript" src="droppin.js"></script>
  59. 	<style>
  60. 	<!-- 
  61. 	.droppin_icon {
  62. 		height: 30px; 
  63. 		width: 25px; 
  64. 		background: url('http://www.garzilla.net/vemaps/images/pin.gif') no-repeat 0 0; 
  65. 		cursor: pointer; 
  66. 	}
  67. 	.droppin_shadow {
  68. 		height: 30px; 
  69. 		width: 42px;
  70. 		background: url('http://www.garzilla.net/vemaps/images/pinShadow.gif') no-repeat 0 0; 
  71. 		-moz-user-select: none;
  72. 		-webkit-user-select: none;
  73. 		filter: Alpha(opacity=50); 
  74. 		-moz-opacity: 0.60; 
  75. 		opacity: 0.60;
  76. 	}
  77. 	--> 
  78. 	</style>
  79. </head>
  80. <body onload="init();">
  81.  
  82. 	<script type="text/javascript">
  83. 	<!-- 
  84. 		var map;
  85. 		function init(){
  86. 			map = new VEMap('container');
  87. 			map.LoadMap();
  88. 		}
  89. 	//--> 
  90. 	</script>
  91. 	<button onclick="map.AddPushpin( map.GetCenter() );">Regular pin</button>
  92. 	<button onclick="map.DropPushpin( map.GetCenter() );">Dropped pin</button>
  93. 	<button onclick="map.DropPushpin( map.GetCenter(), 11, 0 );">Dropped pin (with a offset on the shadow)</button>
  94.  
  95. </body>
  96. </html>

URL: http://www.wildpeaks.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.