Advanced Search

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)

Expand | Embed | Plain Text

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.