Posted By

wildpeaks on 10/12/10

Tagged

Versions (?)

Last Edited at 10/12/10 11:58pm

Statistics

Viewed 520 times

Favorited by 0 user(s)

Related snippets

VEMap.DropPushpin: Create animated pins in Bing Maps

/ Published in: JavaScript

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

Highlighted TextExpand

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>
	 
	</style>
</head>
<body onload="init();">

URL: http://www.wildpeaks.com

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.