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

Revision: 33570

at October 10, 2010 21:19 by wildpeaks

Updated Code

function _addshapeoptions(scope_, type_, points_, options_){
	var shape = new VEShape(type_, points_);
	options_ = options_ || false;
	if (options_){
		for (var key in options_){
			var option = options_[key];
			switch(key){
				case 'Icon':
				case 'CustomIcon':
					if (option === false) shape.HideIcon();
					else shape.SetCustomIcon(option);
				break;
				case 'Title':
					shape.SetTitle(option);
				break;
				case 'Desc':
				case 'Description':
					shape.SetDescription(option);
				break;
				case 'URL':
				case 'MoreInfoURL':
					shape.SetMoreInfoURL(option);
				break;
				case 'Photo':
				case 'PhotoURL':
					shape.SetPhotoURL(option);
				break;
				case 'Z':
				case 'Index':
				case 'ZIndex':
					shape.SetZIndex(option);
				break;
				case 'Min':
				case 'MinZoomLevel':
					shape.SetMinZoomLevel(option);
				break;
				case 'Max':
				case 'MaxZoomLevel':
					shape.SetMaxZoomLevel(option);
				break;
				case 'LineWidth':
					shape.SetLineWidth(option);
				break;
				case 'LineColor':
					shape.SetLineColor(option);
				break;
				case 'FillColor':
					shape.SetFillColor(option);
				break;
				case 'Draggable':
				case 'onstartdrag':
				case 'ondrag':
				case 'onenddrag':
					shape[key] = option;
				break;
			}
		}
	}
	scope_.AddShape(shape);
	return shape;
};
VEMap.prototype.CreatePushpin = function(point_, options_){
	return _addshapeoptions(this, VEShapeType.Pushpin, point_, options_);
};
VEShapeLayer.prototype.CreatePushpin = function(point_, options_){
	return _addshapeoptions(this, VEShapeType.Pushpin, point_, options_);
};
VEMap.prototype.CreatePolyline = function(points_, options_){
	return _addshapeoptions(this, VEShapeType.Polyline, points_, options_);
};
VEShapeLayer.prototype.CreatePolyline = function(points_, options_){
	return _addshapeoptions(this, VEShapeType.Polyline, points_, options_);
};
VEMap.prototype.CreatePolygon = function(points_, options_){
	return _addshapeoptions(this, VEShapeType.Polygon, points_, options_);
};
VEShapeLayer.prototype.CreatePolygon = function(points_, options_){
	return _addshapeoptions(this, VEShapeType.Polygon, points_, options_);
};



/**
 * Usage Example: Multiple polygons using the same color settings.
 */
var map = new VEMap('container');
map.LoadMap( new VELatLong(0, 0), 2 );
var color = {
	Icon: false,
	LineWidth: 3,
	LineColor: new VEColor(255, 0, 0, 1.0),
	FillColor: new VEColor(0, 100, 150, 0.5)
};
map.CreatePolygon(
	[
		new VELatLong(-10, -5, 10), 
		new VELatLong(0, 5, 10), 
		new VELatLong(10, -5, 10), 
		new VELatLong(-10, -5, 10), 
	],
	color 
);
map.CreatePolygon(
	[
		new VELatLong(-10, 20, 10), 
		new VELatLong(0, 30, 10), 
		new VELatLong(10, 20, 10), 
		new VELatLong(-10, 20, 10), 
	],
	color 
);


/**
 * Usage Example: Custom pushpin
 */
var map = new VEMap('container');
map.LoadMap( new VELatLong(0, 0), 2 );
map.CreatePushpin(
	new VELatLong(50, 30),
	{
		Icon: 'http://i.msdn.microsoft.com/dynimg/IC142439.jpg',
		Title: 'This is the title',
		Description: 'This is the description',
		URL: 'http://www.bing.com',
		Photo: 'http://www.google.com/images/logos/ps_logo2.png',
	}
);



/**
 * Usage Example: Draggable pushpin
 */
var map = new VEMap('container');
map.LoadMap( new VELatLong(0, 0), 2 );
var pin = map.CreatePushpin(
	new VELatLong(-50, -30),
	{
		Title: 'Draggable pin',
		Draggable: true,
		onstartdrag: function(){},
		ondrag: function(){},
		onenddrag: function(){}
	}
);
map.ShowInfoBox(pin);

Revision: 33569

at October 10, 2010 21:05 by wildpeaks

Updated Code

VEMap.prototype._addshapeoptions = function(type, points, options){
	var shape = new VEShape(type, points);
	options = options || false;
	if (options){
		for (var key in options){
			var option = options[key];
			switch(key){
				case 'Icon':
				case 'CustomIcon':
					if (option === false) shape.HideIcon();
					else shape.SetCustomIcon(option);
				break;
				case 'Title':
					shape.SetTitle(option);
				break;
				case 'Desc':
				case 'Description':
					shape.SetDescription(option);
				break;
				case 'URL':
				case 'MoreInfoURL':
					shape.SetMoreInfoURL(option);
				break;
				case 'Photo':
				case 'PhotoURL':
					shape.SetPhotoURL(option);
				break;
				case 'Z':
				case 'Index':
				case 'ZIndex':
					shape.SetZIndex(option);
				break;
				case 'Min':
				case 'MinZoomLevel':
					shape.SetMinZoomLevel(option);
				break;
				case 'Max':
				case 'MaxZoomLevel':
					shape.SetMaxZoomLevel(option);
				break;
				case 'LineWidth':
					shape.SetLineWidth(option);
				break;
				case 'LineColor':
					shape.SetLineColor(option);
				break;
				case 'FillColor':
					shape.SetFillColor(option);
				break;
				case 'Draggable':
				case 'onstartdrag':
				case 'ondrag':
				case 'onenddrag':
					shape[key] = option;
				break;
			}
		}
	}
	this.AddShape(shape);
	return shape;
};
VEMap.prototype.CreatePushpin = function(point, options){
	return this._addshapeoptions(VEShapeType.Pushpin, point, options);
};
VEMap.prototype.CreatePolyline = function(points, options){
	return this._addshapeoptions(VEShapeType.Polyline, points, options);
};
VEMap.prototype.CreatePolygon = function(points, options){
	return this._addshapeoptions(VEShapeType.Polygon, points, options);
};



/**
 * Usage Example: Multiple polygons using the same color settings.
 */
var map = new VEMap('container');
map.LoadMap( new VELatLong(0, 0), 2 );
var color = {
	{
		Icon: false,
		LineWidth: 3,
		LineColor: new VEColor(255, 0, 0, 1.0),
		FillColor: new VEColor(0, 100, 150, 0.5),
    }
};
map.CreatePolygon(
	[
		new VELatLong(-10, -5, 10), 
		new VELatLong(0, 5, 10), 
		new VELatLong(10, -5, 10), 
		new VELatLong(-10, -5, 10), 
	],
	color 
);
map.CreatePolygon(
	[
		new VELatLong(-10, 20, 10), 
		new VELatLong(0, 30, 10), 
		new VELatLong(10, 20, 10), 
		new VELatLong(-10, 20, 10), 
	],
	color 
);


/**
 * Usage Example: Custom pushpin
 */
var map = new VEMap('container');
map.LoadMap( new VELatLong(0, 0), 2 );
map.CreatePushpin(
	new VELatLong(50, 30),
	{
		Icon: 'http://i.msdn.microsoft.com/dynimg/IC142439.jpg',
		Title: 'This is the title',
		Description: 'This is the description',
		URL: 'http://www.bing.com',
		Photo: 'http://www.google.com/images/logos/ps_logo2.png',
	}
);



/**
 * Usage Example: Draggable pushpin
 */
var map = new VEMap('container');
map.LoadMap( new VELatLong(0, 0), 2 );
var pin = map.CreatePushpin(
	new VELatLong(-50, -30),
	{
		Title: 'Draggable pin',
		Draggable: true,
		onstartdrag: function(){},
		ondrag: function(){},
		onenddrag: function(){}
	}
);
map.ShowInfoBox(pin);

Revision: 33568

at October 10, 2010 21:04 by wildpeaks

Updated Code

VEMap.prototype._addshapeoptions = function(type, points, options){
	var shape = new VEShape(type, points);
	options = options || false;
	if (options){
		for (var key in options){
			var option = options[key];
			switch(key){
				case 'Icon':
				case 'CustomIcon':
					if (option === false) shape.HideIcon();
					else shape.SetCustomIcon(option);
				break;
				case 'Title':
					shape.SetTitle(option);
				break;
				case 'Desc':
				case 'Description':
					shape.SetDescription(option);
				break;
				case 'URL':
				case 'MoreInfoURL':
					shape.SetMoreInfoURL(option);
				break;
				case 'Photo':
				case 'PhotoURL':
					shape.SetPhotoURL(option);
				break;
				case 'Z':
				case 'Index':
				case 'ZIndex':
					shape.SetZIndex(option);
				break;
				case 'Min':
				case 'MinZoomLevel':
					shape.SetMinZoomLevel(option);
				break;
				case 'Max':
				case 'MaxZoomLevel':
					shape.SetMaxZoomLevel(option);
				break;
				case 'LineWidth':
					shape.SetLineWidth(option);
				break;
				case 'LineColor':
					shape.SetLineColor(option);
				break;
				case 'FillColor':
					shape.SetFillColor(option);
				break;
				case 'Draggable':
				case 'onstartdrag':
				case 'ondrag':
				case 'onenddrag':
					shape[key] = option;
				break;
			}
		}
	}
	this.AddShape(shape);
	return shape;
};
VEMap.prototype.CreatePushpin = function(point, options){
	return this._addshapeoptions(VEShapeType.Pushpin, point, options);
};
VEMap.prototype.CreatePolyline = function(points, options){
	return this._addshapeoptions(VEShapeType.Polyline, points, options);
};
VEMap.prototype.CreatePolygon = function(points, options){
	return this._addshapeoptions(VEShapeType.Polygon, points, options);
};



/**
 * Usage Example: Multiple polygons using the same color settings.
 */
var map = new VEMap('container');
map.LoadMap( new VELatLong(0, 0), 2 );
var color = {
	{
		Icon: false,
		LineWidth: 3,
		LineColor: new VEColor(255, 0, 0, 1.0),
		FillColor: new VEColor(0, 100, 150, 0.5),
    }
};
map.CreatePolygon(
	[
		new VELatLong(-10, -5, 10), 
		new VELatLong(0, 5, 10), 
		new VELatLong(10, -5, 10), 
		new VELatLong(-10, -5, 10), 
	],
	color 
);
map.CreatePolygon(
	[
		new VELatLong(-10, 20, 10), 
		new VELatLong(0, 30, 10), 
		new VELatLong(10, 20, 10), 
		new VELatLong(-10, 20, 10), 
	],
	color 
);


/**
 * Usage Example: Custom pushpin
 */
var map = new VEMap('container');
map.LoadMap( new VELatLong(0, 0), 2 );
map.CreatePushpin(
	new VELatLong(50, 30),
	{
		Icon: 'http://i.msdn.microsoft.com/dynimg/IC142439.jpg',
		Title: 'This is the title',
		Description: 'This is the description',
		URL: 'http://www.bing.com',
		Photo: 'http://www.google.com/images/logos/ps_logo2.png',
		Min: 1,
		Max: 21,
		Draggable: true
	}
);



/**
 * Usage Example: Draggable pushpin
 */
var map = new VEMap('container');
map.LoadMap( new VELatLong(0, 0), 2 );
var pin = map.CreatePushpin(
	new VELatLong(-50, -30),
	{
		Title: 'Draggable pin',
		Draggable: true,
		onstartdrag: function(){},
		ondrag: function(){},
		onenddrag: function(){}
	}
);
map.ShowInfoBox(pin);

Revision: 33567

at October 10, 2010 20:57 by wildpeaks

Updated Code

VEMap.prototype._addshapeoptions = function(type, points, options){
	var shape = new VEShape(type, points);
	options = options || false;
	if (options){
		for (var key in options){
			var option = options[key];
			switch(key){
				case 'Icon':
				case 'CustomIcon':
					if (option === false) shape.HideIcon();
					else shape.SetCustomIcon(option);
				break;
				case 'Title':
					shape.SetTitle(option);
				break;
				case 'Desc':
				case 'Description':
					shape.SetDescription(option);
				break;
				case 'URL':
				case 'MoreInfoURL':
					shape.SetMoreInfoURL(option);
				break;
				case 'Photo':
				case 'PhotoURL':
					shape.SetPhotoURL(option);
				break;
				case 'Z':
				case 'Index':
				case 'ZIndex':
					shape.SetZIndex(option);
				break;
				case 'Min':
				case 'MinZoomLevel':
					shape.SetMinZoomLevel(option);
				break;
				case 'Max':
				case 'MaxZoomLevel':
					shape.SetMaxZoomLevel(option);
				break;
				case 'LineWidth':
					shape.SetLineWidth(option);
				break;
				case 'LineColor':
					shape.SetLineColor(option);
				break;
				case 'FillColor':
					shape.SetFillColor(option);
				break;
				case 'Draggable':
				case 'onstartdrag':
				case 'ondrag':
				case 'onenddrag':
					shape[key] = option;
				break;
			}
		}
	}
	this.AddShape(shape);
	return shape;
};
VEMap.prototype.CreatePushpin = function(point, options){
	return this._addshapeoptions(VEShapeType.Pushpin, point, options);
};
VEMap.prototype.CreatePolyline = function(points, options){
	return this._addshapeoptions(VEShapeType.Polyline, points, options);
};
VEMap.prototype.CreatePolygon = function(points, options){
	return this._addshapeoptions(VEShapeType.Polygon, points, options);
};



/**
 * Usage Example: Custom pushpin
 */
map.CreatePushpin(
	new VELatLong(50, 30),
	{
		Icon: 'http://i.msdn.microsoft.com/dynimg/IC142439.jpg',
		Title: 'This is the title',
		Description: 'This is the description',
		URL: 'http://www.bing.com',
		Photo: 'http://www.google.com/images/logos/ps_logo2.png',
		Min: 1,
		Max: 21,
		Draggable: true
	}
);
</code>


/**
 * Usage Example: Draggable pushpin
 */
var pin = map.CreatePushpin(
	new VELatLong(-50, -30),
	{
		Title: 'Draggable pin',
		Draggable: true,
		onstartdrag: function(){},
		ondrag: function(){},
		onenddrag: function(){}
	}
);
map.ShowInfoBox(pin);

Revision: 33566

at October 10, 2010 20:55 by wildpeaks

Initial Code

VEMap.prototype._addshapeoptions = function(type, points, options){
	var shape = new VEShape(type, points);
	options = options || false;
	if (options){
		for (var key in options){
			var option = options[key];
			switch(key){
				case 'Icon':
				case 'CustomIcon':
					if (option === false) shape.HideIcon();
					else shape.SetCustomIcon(option);
				break;
				case 'Title':
					shape.SetTitle(option);
				break;
				case 'Desc':
				case 'Description':
					shape.SetDescription(option);
				break;
				case 'URL':
				case 'MoreInfoURL':
					shape.SetMoreInfoURL(option);
				break;
				case 'Photo':
				case 'PhotoURL':
					shape.SetPhotoURL(option);
				break;
				case 'Z':
				case 'Index':
				case 'ZIndex':
					shape.SetZIndex(option);
				break;
				case 'Min':
				case 'MinZoomLevel':
					shape.SetMinZoomLevel(option);
				break;
				case 'Max':
				case 'MaxZoomLevel':
					shape.SetMaxZoomLevel(option);
				break;
				case 'LineWidth':
					shape.SetLineWidth(option);
				break;
				case 'LineColor':
					shape.SetLineColor(option);
				break;
				case 'FillColor':
					shape.SetFillColor(option);
				break;
				case 'Draggable':
				case 'onstartdrag':
				case 'ondrag':
				case 'onenddrag':
					shape[key] = option;
				break;
			}
		}
	}
	this.AddShape(shape);
	return shape;
};
VEMap.prototype.CreatePushpin = function(point, options){
	return this._addshapeoptions(VEShapeType.Pushpin, point, options);
};
VEShapeLayer.prototype.CreatePushpin = function(point, options){
	return this._addshapeoptions(VEShapeType.Pushpin, point, options);
};
VEMap.prototype.CreatePolyline = function(points, options){
	return this._addshapeoptions(VEShapeType.Polyline, points, options);
};
VEShapeLayer.prototype.CreatePolyline = function(points, options){
	return this._addshapeoptions(VEShapeType.Polyline, points, options);
};
VEMap.prototype.CreatePolygon = function(points, options){
	return this._addshapeoptions(VEShapeType.Polygon, points, options);
};
VEShapeLayer.prototype.CreatePolygon = function(points, options){
	return this._addshapeoptions(VEShapeType.Polygon, points, options);
};

Initial URL

http://www.wildpeaks.com

Initial Description

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

Initial Title

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

Initial Tags

Initial Language

JavaScript

Choose a language for easy browsing: