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).


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.