VEMap.CreatePushpin(point, options) and similar functions to create advanced pins, polylines & polygons easily in Bing Maps


/ Published in: JavaScript
Save to your folder(s)

**Important: this snipplet has moved to Github.**

- [Extend Bing Maps AJAX 6.3 to create pushpins, polylines and polygons easily](https://gist.github.com/1972874)


Copy this code and paste it in your HTML
  1. function _addshapeoptions(scope_, type_, points_, options_){
  2. var shape = new VEShape(type_, points_);
  3. options_ = options_ || false;
  4. if (options_){
  5. for (var key in options_){
  6. var option = options_[key];
  7. switch(key){
  8. case 'Icon':
  9. case 'CustomIcon':
  10. if (option === false) shape.HideIcon();
  11. else shape.SetCustomIcon(option);
  12. break;
  13. case 'Title':
  14. shape.SetTitle(option);
  15. break;
  16. case 'Desc':
  17. case 'Description':
  18. shape.SetDescription(option);
  19. break;
  20. case 'URL':
  21. case 'MoreInfoURL':
  22. shape.SetMoreInfoURL(option);
  23. break;
  24. case 'Photo':
  25. case 'PhotoURL':
  26. shape.SetPhotoURL(option);
  27. break;
  28. case 'Z':
  29. case 'Index':
  30. case 'ZIndex':
  31. shape.SetZIndex(option);
  32. break;
  33. case 'Min':
  34. case 'MinZoomLevel':
  35. shape.SetMinZoomLevel(option);
  36. break;
  37. case 'Max':
  38. case 'MaxZoomLevel':
  39. shape.SetMaxZoomLevel(option);
  40. break;
  41. case 'LineWidth':
  42. shape.SetLineWidth(option);
  43. break;
  44. case 'LineColor':
  45. shape.SetLineColor(option);
  46. break;
  47. case 'FillColor':
  48. shape.SetFillColor(option);
  49. break;
  50. case 'Draggable':
  51. case 'onstartdrag':
  52. case 'ondrag':
  53. case 'onenddrag':
  54. shape[key] = option;
  55. break;
  56. }
  57. }
  58. }
  59. scope_.AddShape(shape);
  60. return shape;
  61. };
  62. VEMap.prototype.CreatePushpin = function(point_, options_){
  63. return _addshapeoptions(this, VEShapeType.Pushpin, point_, options_);
  64. };
  65. VEShapeLayer.prototype.CreatePushpin = function(point_, options_){
  66. return _addshapeoptions(this, VEShapeType.Pushpin, point_, options_);
  67. };
  68. VEMap.prototype.CreatePolyline = function(points_, options_){
  69. return _addshapeoptions(this, VEShapeType.Polyline, points_, options_);
  70. };
  71. VEShapeLayer.prototype.CreatePolyline = function(points_, options_){
  72. return _addshapeoptions(this, VEShapeType.Polyline, points_, options_);
  73. };
  74. VEMap.prototype.CreatePolygon = function(points_, options_){
  75. return _addshapeoptions(this, VEShapeType.Polygon, points_, options_);
  76. };
  77. VEShapeLayer.prototype.CreatePolygon = function(points_, options_){
  78. return _addshapeoptions(this, VEShapeType.Polygon, points_, options_);
  79. };
  80.  
  81.  
  82.  
  83. /**
  84.  * Usage Example: Multiple polygons using the same color settings.
  85.  */
  86. var map = new VEMap('container');
  87. map.LoadMap( new VELatLong(0, 0), 2 );
  88. var color = {
  89. Icon: false,
  90. LineWidth: 3,
  91. LineColor: new VEColor(255, 0, 0, 1.0),
  92. FillColor: new VEColor(0, 100, 150, 0.5)
  93. };
  94. map.CreatePolygon(
  95. [
  96. new VELatLong(-10, -5, 10),
  97. new VELatLong(0, 5, 10),
  98. new VELatLong(10, -5, 10),
  99. new VELatLong(-10, -5, 10),
  100. ],
  101. color
  102. );
  103. map.CreatePolygon(
  104. [
  105. new VELatLong(-10, 20, 10),
  106. new VELatLong(0, 30, 10),
  107. new VELatLong(10, 20, 10),
  108. new VELatLong(-10, 20, 10),
  109. ],
  110. color
  111. );
  112.  
  113.  
  114. /**
  115.  * Usage Example: Custom pushpin
  116.  */
  117. var map = new VEMap('container');
  118. map.LoadMap( new VELatLong(0, 0), 2 );
  119. map.CreatePushpin(
  120. new VELatLong(50, 30),
  121. {
  122. Icon: 'http://i.msdn.microsoft.com/dynimg/IC142439.jpg',
  123. Title: 'This is the title',
  124. Description: 'This is the description',
  125. URL: 'http://www.bing.com',
  126. Photo: 'http://www.google.com/images/logos/ps_logo2.png',
  127. }
  128. );
  129.  
  130.  
  131.  
  132. /**
  133.  * Usage Example: Draggable pushpin
  134.  */
  135. var map = new VEMap('container');
  136. map.LoadMap( new VELatLong(0, 0), 2 );
  137. var pin = map.CreatePushpin(
  138. new VELatLong(-50, -30),
  139. {
  140. Title: 'Draggable pin',
  141. Draggable: true,
  142. onstartdrag: function(){},
  143. ondrag: function(){},
  144. onenddrag: function(){}
  145. }
  146. );
  147. map.ShowInfoBox(pin);

URL: http://www.wildpeaks.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.