VEMap.DropPushpin: Create animated pins in Bing Maps - JavaScript Snipplr Social Repository

Revision: 33750

at October 13, 2010 01:32 by wildpeaks

Updated Code

<script type="text/javascript">
/**
 * This snipplet adds the following methods:
 *   VEMap.DropPushpin
 *   VEShapeLayer.DropPushpin
 * 
 * This is similar to VEMap.AddPushpin except the pin is animated (it "falls" on the map).
**/
VEMap._droppins = {};
VEMap._droptick = function(id_){
	var pin = VEMap._droppins[id_];
	pin.x -=10;
	pin.y +=10;

	pin.icon.style.top = pin.shadow.style.top = pin.y + 'px';
	pin.shadow.style.left = pin.x + 'px';

	if (pin.y >= 0){
		clearInterval(pin.interval);
		delete VEMap._droppins[id_];
	}
}
VEMap.prototype.DropPushpin = VEShapeLayer.prototype.DropPushpin = function(point_, shadowx_, shadowy_){
	var shape = new VEShape(VEShapeType.Pushpin, point_);
	shape.SetCustomIcon('<span></span>');
	map.AddShape(shape);

	var x = 200 + (shadowx_ ? shadowx_ : 0);
	var y = -200 + (shadowy_ ? shadowy_ : 0);
	var id = shape.GetID();
	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>');
	
	var distance = 170;
	var icon = document.getElementById(id + '_icon');
	var shadow = document.getElementById(id + '_shadow');
	VEMap._droppins[id] = {
		icon: icon,
		shadow: shadow,
		x: x,
		y: y
	};
	VEMap._droppins[id]['interval'] = setInterval('VEMap._droptick("' + id + '")', 10);

	return shape;
};
</script>



/***********************
 * Example
 **********************/
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
	<script type="text/javascript" src="droppin.js"></script>
	<style>
	<!-- 
	.droppin_icon {
		height: 30px; 
		width: 25px; 
		background: url('http://www.garzilla.net/vemaps/images/pin.gif') no-repeat 0 0; 
		cursor: pointer; 
	}
	.droppin_shadow {
		height: 30px; 
		width: 42px;
		background: url('http://www.garzilla.net/vemaps/images/pinShadow.gif') no-repeat 0 0; 
		-moz-user-select: none;
		-webkit-user-select: none;
		filter: Alpha(opacity=50); 
		-moz-opacity: 0.60; 
		opacity: 0.60;
	}
	--> 
	</style>
</head>
<body onload="init();">

	<script type="text/javascript">
	<!-- 
		var map;
		function init(){
			map = new VEMap('container');
			map.LoadMap();
		}
	//--> 
	</script>
	<button onclick="map.AddPushpin( map.GetCenter() );">Regular pin</button>
	<button onclick="map.DropPushpin( map.GetCenter() );">Dropped pin</button>
	<button onclick="map.DropPushpin( map.GetCenter(), 11, 0 );">Dropped pin (with a offset on the shadow)</button>
	
</body>
</html>

Revision: 33749

at October 13, 2010 01:31 by wildpeaks

Updated Code

<script type="text/javascript">
/**
 * This snipplet adds the following methods:
 *   VEMap.DropPushpin
 *   VEShapeLayer.DropPushpin
 * 
 * This is similar to VEMap.AddPushpin except the pin is animated (it "falls" on the map).
**/
VEMap._droppins = {};
VEMap._droptick = function(id_){
	var pin = VEMap._droppins[id_];
	pin.x -=10;
	pin.y +=10;

	pin.icon.style.top = pin.shadow.style.top = pin.y + 'px';
	pin.shadow.style.left = pin.x + 'px';

	if (pin.y >= 0){
		clearInterval(pin.interval);
		delete VEMap._droppins[id_];
	}
}
VEMap.prototype.DropPushpin = VEShapeLayer.prototype.DropPushpin = function(point_, shadowx_, shadowy_){
	var shape = new VEShape(VEShapeType.Pushpin, point_);
	shape.SetCustomIcon('<span></span>');
	map.AddShape(shape);

	var x = 200 + (shadowx_ ? shadowx_ : 0);
	var y = -200 + (shadowy_ ? shadowy_ : 0);
	var id = shape.GetID();
	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>');
	
	var distance = 170;
	var icon = document.getElementById(id + '_icon');
	var shadow = document.getElementById(id + '_shadow');
	VEMap._droppins[id] = {
		icon: icon,
		shadow: shadow,
		x: x,
		y: y
	};
	VEMap._droppins[id]['interval'] = setInterval('VEMap._droptick("' + id + '")', 10);

	return shape;
};
</script>



/***********************
 * Example
 **********************/
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
	<script type="text/javascript" src="droppin.js"></script>
	<style>
	<!-- 
	.droppin_icon {
		height: 30px; 
		width: 25px; 
		background: url('http://www.garzilla.net/vemaps/images/pin.gif') no-repeat 0 0; 
		cursor: pointer; 
	}
	.droppin_shadow {
		height: 30px; 
		width: 42px;
		background: url('http://www.garzilla.net/vemaps/images/pinShadow.gif') no-repeat 0 0; 
		-moz-user-select: none;
		-webkit-user-select: none;
		filter: Alpha(opacity=50); 
		-moz-opacity: 0.60; 
		opacity: 0.60;
	}
	--> 
	</style>
</head>
<body onload="init();">

	<script type="text/javascript">
	<!-- 
		var map;
		function init(){
			map = new VEMap('container');
			map.LoadMap();
		}
	//--> 
	</script>
	<button onclick="map.AddPushpin( map.GetCenter() );">Regular pin</button>
	<button onclick="map.DropPushpin( map.GetCenter() );">Dropped pin</button>
	<button onclick="map.DropPushpin( map.GetCenter(), 11, 0 );">Dropped pin (with a offset on the shadow)</button>
	
</body>
</html>

Revision: 33748

at October 13, 2010 00:16 by wildpeaks

Updated Code

<script type="text/javascript">
/**
 * This snipplet adds the following methods:
 *   VEMap.DropPushpin
 *   VEShapeLayer.DropPushpin
 * 
 * This is similar to VEMap.AddPushpin except the pin is animated (it "falls" on the map).
**/
VEMap._droppins = {};
VEMap._droptick = function(id_){
	var pin = VEMap._droppins[id_];
	pin.x -=10;
	pin.y +=10;

	pin.icon.style.top = pin.shadow.style.top = pin.y + 'px';
	pin.shadow.style.left = pin.x + 'px';

	if (pin.y >= 0){
		clearInterval(pin.interval);
		delete VEMap._droppins[id_];
	}
}
VEMap.prototype.DropPushpin = VEShapeLayer.prototype.DropPushpin = function(point_, shadowx_, shadowy_){
	var shape = new VEShape(VEShapeType.Pushpin, point_);
	shape.SetCustomIcon('<span></span>');
	map.AddShape(shape);

	var x = 200 + (shadowx_ ? shadowx_ : 0);
	var y = -200 + (shadowy_ ? shadowy_ : 0);
	var id = shape.GetID();
	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>');
	
	var distance = 170;
	var icon = document.getElementById(id + '_icon');
	var shadow = document.getElementById(id + '_shadow');
	VEMap._droppins[id] = {
		icon: icon,
		shadow: shadow,
		x: x,
		y: y
	};
	VEMap._droppins[id]['interval'] = setInterval('VEMap._droptick("' + id + '")', 10);

	return shape;
};
</script>


/***********************
 * Example
 **********************/
<html>
<head>
	<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
	<script type="text/javascript" src="droppin.js"></script>
	<style>
	<!-- 
	.droppin_icon {
		height: 30px; 
		width: 25px; 
		background: url('http://www.garzilla.net/vemaps/images/pin.gif') no-repeat 0 0; 
		cursor: pointer; 
	}
	.droppin_shadow {
		height: 30px; 
		width: 42px;
		background: url('http://www.garzilla.net/vemaps/images/pinShadow.gif') no-repeat 0 0; 
		-moz-user-select: none;
		-webkit-user-select: none;
		filter: Alpha(opacity=50); 
		-moz-opacity: 0.60; 
		opacity: 0.60;
	}
	--> 
	</style>
</head>
<body onload="init();">

	<script type="text/javascript">
	<!-- 
		var map;
		function init(){
			map = new VEMap('container');
			map.LoadMap();
		}
	//--> 
	</script>
	<button onclick="map.AddPushpin( map.GetCenter() );">Regular pin</button>
	<button onclick="map.DropPushpin( map.GetCenter() );">Dropped pin</button>
	<button onclick="map.DropPushpin( map.GetCenter(), 11, 0 );">Dropped pin (with a offset on the shadow)</button>
	
</body>
</html>

Revision: 33747

at October 13, 2010 00:15 by wildpeaks

Updated Code

<script type="text/javascript">
/**
 * This snipplet adds the following methods:
 *   VEMap.DropPushpin
 *   VEShapeLayer.DropPushpin
 * 
 * This is similar to VEMap.AddPushpin except the pin is animated (it "falls" on the map).
**/
VEMap._droppins = {};
VEMap._droptick = function(id_){
	var pin = VEMap._droppins[id_];
	pin.x -=10;
	pin.y +=10;

	pin.icon.style.top = pin.shadow.style.top = pin.y + 'px';
	pin.shadow.style.left = pin.x + 'px';

	if (pin.y >= 0){
		clearInterval(pin.interval);
		delete VEMap._droppins[id_];
	}
}
VEMap.prototype.DropPushpin = VEShapeLayer.prototype.DropPushpin = function(point_, shadowx_, shadowy_){
	var shape = new VEShape(VEShapeType.Pushpin, point_);
	shape.SetCustomIcon('<span></span>');
	map.AddShape(shape);

	var x = 200 + (shadowx_ ? shadowx_ : 0);
	var y = -200 + (shadowy_ ? shadowy_ : 0);
	var id = shape.GetID();
	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>');
	
	var distance = 170;
	var icon = document.getElementById(id + '_icon');
	var shadow = document.getElementById(id + '_shadow');
	VEMap._droppins[id] = {
		icon: icon,
		shadow: shadow,
		x: x,
		y: y
	};
	VEMap._droppins[id]['interval'] = setInterval('VEMap._droptick("' + id + '")', 10);

	return shape;
};
</script>


/***********************
 * Example
 **********************/
<html>
<head>
	<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
	<script type="text/javascript" src="droppin.js"></script>
	<style>
	<!-- 
	.droppin_icon {
		height: 30px; 
		width: 25px; 
		background: url('http://www.garzilla.net/vemaps/images/pin.gif') no-repeat 0 0; 
		cursor: pointer; 
	}
	.droppin_shadow {
		height: 30px; 
		width: 42px;
		background: url('http://www.garzilla.net/vemaps/images/pinShadow.gif') no-repeat 0 0; 
		-moz-user-select: none;
		-webkit-user-select: none;
		filter: Alpha(opacity=50); 
		-moz-opacity: 0.60; 
		opacity: 0.60;
	}
	--> 
	</style>
</head>
<body onload="init();">

	<script type="text/javascript">
	var map;
	function init(){
		map = new VEMap('container');
		map.LoadMap();
	}
	</script>
	<button onclick="map.AddPushpin( map.GetCenter() );">Regular pin</button>
	<button onclick="map.DropPushpin( map.GetCenter() );">Dropped pin</button>
	<button onclick="map.DropPushpin( map.GetCenter(), 11, 0 );">Dropped pin (with a offset on the shadow)</button>
	
</body>
</html>

Revision: 33746

at October 13, 2010 00:14 by wildpeaks

Updated Code

<script type="text/javascript">
/**
 * This snipplet adds the following methods:
 *   VEMap.DropPushpin
 *   VEShapeLayer.DropPushpin
 * 
 * This is similar to VEMap.AddPushpin except the pin is animated (it "falls" on the map).
**/
VEMap._droppins = {};
VEMap._droptick = function(id_){
	var pin = VEMap._droppins[id_];
	pin.x -=10;
	pin.y +=10;

	pin.icon.style.top = pin.shadow.style.top = pin.y + 'px';
	pin.shadow.style.left = pin.x + 'px';

	if (pin.y >= 0){
		clearInterval(pin.interval);
		delete VEMap._droppins[id_];
	}
}
VEMap.prototype.DropPushpin = VEShapeLayer.prototype.DropPushpin = function(point_, shadowx_, shadowy_){
	var shape = new VEShape(VEShapeType.Pushpin, point_);
	shape.SetCustomIcon('<span></span>');
	map.AddShape(shape);

	var x = 200 + (shadowx_ ? shadowx_ : 0);
	var y = -200 + (shadowy_ ? shadowy_ : 0);
	var id = shape.GetID();
	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>');
	
	var distance = 170;
	var icon = document.getElementById(id + '_icon');
	var shadow = document.getElementById(id + '_shadow');
	VEMap._droppins[id] = {
		icon: icon,
		shadow: shadow,
		x: x,
		y: y
	};
	VEMap._droppins[id]['interval'] = setInterval('VEMap._droptick("' + id + '")', 10);

	return shape;
};
</script>


/***********************
 * Example
 **********************/
<html>
<head>
	<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
	<style>
	<!-- 
	.droppin_icon {
		height: 30px; 
		width: 25px; 
		background: url('http://www.garzilla.net/vemaps/images/pin.gif') no-repeat 0 0; 
		cursor: pointer; 
	}
	.droppin_shadow {
		height: 30px; 
		width: 42px;
		background: url('http://www.garzilla.net/vemaps/images/pinShadow.gif') no-repeat 0 0; 
		-moz-user-select: none;
		-webkit-user-select: none;
		filter: Alpha(opacity=50); 
		-moz-opacity: 0.60; 
		opacity: 0.60;
	}
	--> 
	</style>
</head>
<body onload="init();">

	<script type="text/javascript">
	var map;
	function init(){
		map = new VEMap('container');
		map.LoadMap();
	}
	</script>
	<button onclick="map.AddPushpin( map.GetCenter() );">Regular pin</button>
	<button onclick="map.DropPushpin( map.GetCenter() );">Dropped pin</button>
	<button onclick="map.DropPushpin( map.GetCenter(), 11, 0 );">Dropped pin (with a offset on the shadow)</button>
	
</body>
</html>

Revision: 33745

at October 13, 2010 00:02 by wildpeaks

Updated Code

/**
 * This snipplet adds the following methods:
 *   VEMap.DropPushpin
 *   VEShapeLayer.DropPushpin
 * 
 * This is similar to VEMap.AddPushpin except the pin is animated (it "falls" on the map).
**/

VEMap._droppins = {};
VEMap._droptick = function(id_){
	var pin = VEMap._droppins[id_];
	pin.x -=10;
	pin.y +=10;

	pin.icon.style.top = pin.shadow.style.top = pin.y + 'px';
	pin.shadow.style.left = pin.x + 'px';

	if (pin.y >= 0){
		clearInterval(pin.interval);
		delete VEMap._droppins[id_];
	}
}
VEMap.prototype.DropPushpin = VEShapeLayer.prototype.DropPushpin = function(point_, shadowx_, shadowy_){
	var shape = new VEShape(VEShapeType.Pushpin, point_);
	shape.SetCustomIcon('<span></span>');
	map.AddShape(shape);

	var x = 200 + (shadowx_ ? shadowx_ : 0);
	var y = -200 + (shadowy_ ? shadowy_ : 0);
	var id = shape.GetID();
	shape.SetCustomIcon('<div style="position: relative;"><div id="'+id+'_shadow" class="droppin_shadow" style="left: '+x+'px; top: '+y+'px;">&nbsp;</div><div id="'+id+'_icon" class="droppin_icon" style="top: '+y+'px;">&nbsp;</div></div>');
	
	var distance = 170;
	var icon = document.getElementById(id + '_icon');
	var shadow = document.getElementById(id + '_shadow');
	VEMap._droppins[id] = {
		icon: icon,
		shadow: shadow,
		x: x,
		y: y
	};
	VEMap._droppins[id]['interval'] = setInterval('VEMap._droptick("' + id + '")', 10);

	return shape;
};


And the matching CSS:
<style>
.droppin_icon {
	position: absolute; 
	height: 30px; 
	width: 25px; 
	background: url('http://www.garzilla.net/vemaps/images/pin.gif') no-repeat 0 0; 
	cursor: pointer; 
}
.droppin_shadow {
	position: absolute; 
	height: 30px; 
	width: 42px;
	background: url('http://www.garzilla.net/vemaps/images/pinShadow.gif') no-repeat 0 0; 
	-moz-user-select: none;
	-webkit-user-select: none;
	filter: Alpha(opacity=50); 
	-moz-opacity: 0.60; 
	opacity: 0.60;
}
</style>




/***********************
 * Example
 **********************/
<head>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
</head>
<body onload="init()">
 <div id="container" style="width: 512px; height: 512px; position: relative;"></div>
 ...


<script type="text/javascript">
var map;
function init(){
	map = new VEMap('container');
	map.LoadMap();
}
</script>
<button onclick="map.AddPushpin( map.GetCenter() );">Regular pin</button>
<button onclick="map.DropPushpin( map.GetCenter() );">Dropped pin</button>
<button onclick="map.DropPushpin( map.GetCenter(), 11, 0 );">Dropped pin (with a offset on the shadow)</button>

Revision: 33744

at October 13, 2010 00:02 by wildpeaks

Updated Code

/**
 * This snipplet adds the following methods:
 *   VEMap.DropPushpin
 *   VEShapeLayer.DropPushpin
 * 
 * This is similar to VEMap.AddPushpin except the pin is animated (it "falls" on the map).
**/

VEMap._droppins = {};
VEMap._droptick = function(id_){
	var pin = VEMap._droppins[id_];
	pin.x -=10;
	pin.y +=10;

	pin.icon.style.top = pin.shadow.style.top = pin.y + 'px';
	pin.shadow.style.left = pin.x + 'px';

	if (pin.y >= 0){
		clearInterval(pin.interval);
		delete VEMap._droppins[id_];
	}
}
VEMap.prototype.DropPushpin = VEShapeLayer.prototype.DropPushpin = function(point_, shadowx_, shadowy_){
	var shape = new VEShape(VEShapeType.Pushpin, point_);
	shape.SetCustomIcon('<span></span>');
	map.AddShape(shape);

	var x = 200 + (shadowx_ ? shadowx_ : 0);
	var y = -200 + (shadowy_ ? shadowy_ : 0);
	var id = shape.GetID();
	shape.SetCustomIcon('<div style="position: relative;"><div id="'+id+'_shadow" class="droppin_shadow" style="left: '+x+'px; top: '+y+'px;">&nbsp;</div><div id="'+id+'_icon" class="droppin_icon" style="top: '+y+'px;">&nbsp;</div></div>');
	
	var distance = 170;
	var icon = document.getElementById(id + '_icon');
	var shadow = document.getElementById(id + '_shadow');
	VEMap._droppins[id] = {
		icon: icon,
		shadow: shadow,
		x: x,
		y: y
	};
	VEMap._droppins[id]['interval'] = setInterval('VEMap._droptick("' + id + '")', 10);

	return shape;
};


And the matching CSS:
<style>
.droppin_icon {
	position: absolute; 
	height: 30px; 
	width: 25px; 
	background: url('http://www.garzilla.net/vemaps/images/pin.gif') no-repeat 0 0; 
	cursor: pointer; 
}
.droppin_shadow {
	position: absolute; 
	height: 30px; 
	width: 42px;
	background: url('http://www.garzilla.net/vemaps/images/pinShadow.gif') no-repeat 0 0; 
	-moz-user-select: none;
	-webkit-user-select: none;
	filter: Alpha(opacity=50); 
	-moz-opacity: 0.60; 
	opacity: 0.60;
}
</style>




/***********************
 * Example
 **********************/
<head>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3&mkt=en-us"></script>
</head>
<body onload="init()">
 <div id="container" style="width: 512px; height: 512px; position: relative;"></div>
 ...


<script type="text/javascript">
var map;
function init(){
	map = new VEMap('container');
	map.LoadMap();
}
</script>
<button onclick="map.AddPushpin( map.GetCenter() );">Regular pin</button>
<button onclick="map.DropPushpin( map.GetCenter() );">Dropped pin</button>
<button onclick="map.DropPushpin( map.GetCenter(), 11, 0 );">Dropped pin (with a offset on the shadow)</button>

Revision: 33743

at October 13, 2010 00:00 by wildpeaks

Updated Code

/**
 * This snipplet adds the following methods:
 *   VEMap.DropPushpin
 *   VEShapeLayer.DropPushpin
 * 
 * This is similar to VEMap.AddPushpin except the pin is animated (it "falls" on the map).
**/

VEMap._droppins = {};
VEMap._droptick = function(id_){
	var pin = VEMap._droppins[id_];
	pin.x -=10;
	pin.y +=10;

	pin.icon.style.top = pin.shadow.style.top = pin.y + 'px';
	pin.shadow.style.left = pin.x + 'px';

	if (pin.y >= 0){
		clearInterval(pin.interval);
		delete VEMap._droppins[id_];
	}
}
VEMap.prototype.DropPushpin = VEShapeLayer.prototype.DropPushpin = function(point_, shadowx_, shadowy_){
	var shape = new VEShape(VEShapeType.Pushpin, point_);
	shape.SetCustomIcon('<span></span>');
	map.AddShape(shape);

	var x = 200 + (shadowx_ ? shadowx_ : 0);
	var y = -200 + (shadowy_ ? shadowy_ : 0);
	var id = shape.GetID();
	shape.SetCustomIcon('<div style="position: relative;"><div id="'+id+'_shadow" class="droppin_shadow" style="left: '+x+'px; top: '+y+'px;">&nbsp;</div><div id="'+id+'_icon" class="droppin_icon" style="top: '+y+'px;">&nbsp;</div></div>');
	
	var distance = 170;
	var icon = document.getElementById(id + '_icon');
	var shadow = document.getElementById(id + '_shadow');
	VEMap._droppins[id] = {
		icon: icon,
		shadow: shadow,
		x: x,
		y: y
	};
	VEMap._droppins[id]['interval'] = setInterval('VEMap._droptick("' + id + '")', 10);

	return shape;
};


And the matching CSS:
<style>
.droppin_icon {
	position: absolute; 
	height: 30px; 
	width: 25px; 
	background: url('http://www.garzilla.net/vemaps/images/pin.gif') no-repeat 0 0; 
	cursor: pointer; 
}
.droppin_shadow {
	position: absolute; 
	height: 30px; 
	width: 42px;
	background: url('http://www.garzilla.net/vemaps/images/pinShadow.gif') no-repeat 0 0; 
	-moz-user-select: none;
	-webkit-user-select: none;
	filter: Alpha(opacity=50); 
	-moz-opacity: 0.60; 
	opacity: 0.60;
}
</style>




/***********************
 * Example
 **********************/
<body onload="init()">
 <div id="container" style="width: 512px; height: 512px; position: relative;"></div>
 ...


<script type="text/javascript">
var map;
function init(){
	map = new VEMap('container');
	map.LoadMap();
}
</script>
<button onclick="map.AddPushpin( map.GetCenter() );">Regular pin</button>
<button onclick="map.DropPushpin( map.GetCenter() );">Dropped pin</button>
<button onclick="map.DropPushpin( map.GetCenter(), 11, 0 );">Dropped pin (with a offset on the shadow)</button>

Revision: 33742

at October 12, 2010 23:59 by wildpeaks

Updated Code

/**
 * This snipplet adds the following methods:
 *   VEMap.DropPushpin
 *   VEShapeLayer.DropPushpin
 * 
 * This is similar to VEMap.AddPushpin except the pin is animated (it "falls" on the map).
**/

VEMap._droppins = {};
VEMap._droptick = function(id_){
	var pin = VEMap._droppins[id_];
	pin.x -=10;
	pin.y +=10;

	pin.icon.style.top = pin.shadow.style.top = pin.y + 'px';
	pin.shadow.style.left = pin.x + 'px';

	if (pin.y >= 0){
		clearInterval(pin.interval);
		delete VEMap._droppins[id_];
	}
}
VEMap.prototype.DropPushpin = VEShapeLayer.prototype.DropPushpin = function(point_, shadowx_, shadowy_){
	var shape = new VEShape(VEShapeType.Pushpin, point_);
	shape.SetCustomIcon('<span></span>');
	map.AddShape(shape);

	var x = 200 + (shadowx_ ? shadowx_ : 0);
	var y = -200 + (shadowy_ ? shadowy_ : 0);
	var id = shape.GetID();
	shape.SetCustomIcon('<div style="position: relative;"><div id="'+id+'_shadow" class="droppin_shadow" style="left: '+x+'px; top: '+y+'px;">&nbsp;</div><div id="'+id+'_icon" class="droppin_icon" style="top: '+y+'px;">&nbsp;</div></div>');
	
	var distance = 170;
	var icon = document.getElementById(id + '_icon');
	var shadow = document.getElementById(id + '_shadow');
	VEMap._droppins[id] = {
		icon: icon,
		shadow: shadow,
		x: x,
		y: y
	};
	VEMap._droppins[id]['interval'] = setInterval('VEMap._droptick("' + id + '")', 10);

	return shape;
};

/**And the matching CSS:
<style>
.droppin_icon {
	position: absolute; 
	height: 30px; 
	width: 25px; 
	background: url('http://www.garzilla.net/vemaps/images/pin.gif') no-repeat 0 0; 
	cursor: pointer; 
}
.droppin_shadow {
	position: absolute; 
	height: 30px; 
	width: 42px;
	background: url('http://www.garzilla.net/vemaps/images/pinShadow.gif') no-repeat 0 0; 
	-moz-user-select: none;
	-webkit-user-select: none;
	filter: Alpha(opacity=50); 
	-moz-opacity: 0.60; 
	opacity: 0.60;
}
</style>
**/



/***********************
 * Example
 **********************/
<body onload="init()">
 <div id="container" style="width: 512px; height: 512px; position: relative;"></div>
 ...


<script type="text/javascript">
var map;
function init(){
	map = new VEMap('container');
	map.LoadMap();
}
</script>
<button onclick="map.AddPushpin( map.GetCenter() );">Regular pin</button>
<button onclick="map.DropPushpin( map.GetCenter() );">Dropped pin</button>
<button onclick="map.DropPushpin( map.GetCenter(), 11, 0 );">Dropped pin (with a offset on the shadow)</button>

Revision: 33741

at October 12, 2010 23:58 by wildpeaks

Initial Code

/**
 * This snipplet adds the following methods:
 *   VEMap.DropPushpin
 *   VEShapeLayer.DropPushpin
 * 
 * This is similar to VEMap.AddPushpin except the pin is animated (it "falls" on the map).
**/

VEMap._droppins = {};
VEMap._droptick = function(id_){
	var pin = VEMap._droppins[id_];
	pin.x -=10;
	pin.y +=10;

	pin.icon.style.top = pin.shadow.style.top = pin.y + 'px';
	pin.shadow.style.left = pin.x + 'px';

	if (pin.y >= 0){
		clearInterval(pin.interval);
		delete VEMap._droppins[id_];
	}
}
VEMap.prototype.DropPushpin = VEShapeLayer.prototype.DropPushpin = function(point_, shadowx_, shadowy_){
	var shape = new VEShape(VEShapeType.Pushpin, point_);
	shape.SetCustomIcon('<span></span>');
	map.AddShape(shape);

	var x = 200 + (shadowx_ ? shadowx_ : 0);
	var y = -200 + (shadowy_ ? shadowy_ : 0);
	var id = shape.GetID();
	shape.SetCustomIcon('<div style="position: relative;"><div id="'+id+'_shadow" class="droppin_shadow" style="left: '+x+'px; top: '+y+'px;">&nbsp;</div><div id="'+id+'_icon" class="droppin_icon" style="top: '+y+'px;">&nbsp;</div></div>');
	
	var distance = 170;
	var icon = document.getElementById(id + '_icon');
	var shadow = document.getElementById(id + '_shadow');
	VEMap._droppins[id] = {
		icon: icon,
		shadow: shadow,
		x: x,
		y: y
	};
	VEMap._droppins[id]['interval'] = setInterval('VEMap._droptick("' + id + '")', 10);

	return shape;
};

And the matching CSS:
<style>
.droppin_icon {
	position: absolute; 
	height: 30px; 
	width: 25px; 
	background: url('http://www.garzilla.net/vemaps/images/pin.gif') no-repeat 0 0; 
	cursor: pointer; 
}
.droppin_shadow {
	position: absolute; 
	height: 30px; 
	width: 42px;
	background: url('http://www.garzilla.net/vemaps/images/pinShadow.gif') no-repeat 0 0; 
	-moz-user-select: none;
	-webkit-user-select: none;
	filter: Alpha(opacity=50); 
	-moz-opacity: 0.60; 
	opacity: 0.60;
}
</style>




/***********************
 * Example
 **********************/
<body onload="init()">
 <div id="container" style="width: 512px; height: 512px; position: relative;"></div>
 ...


<script type="text/javascript">
var map;
function init(){
	map = new VEMap('container');
	map.LoadMap();
}
</script>
<button onclick="map.AddPushpin( map.GetCenter() );">Regular pin</button>
<button onclick="map.DropPushpin( map.GetCenter() );">Dropped pin</button>
<button onclick="map.DropPushpin( map.GetCenter(), 11, 0 );">Dropped pin (with a offset on the shadow)</button>

Initial URL

http://www.wildpeaks.com

Initial Description

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

Initial Title

VEMap.DropPushpin: Create animated pins in Bing Maps

Initial Tags

Initial Language

JavaScript

Choose a language for easy browsing: