Revision: 33750
Updated Code
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;"> </div><div id="'+id+'_icon" class="droppin_icon" style="position: absolute; top: '+y+'px;"> </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
Updated Code
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;"> </div><div id="'+id+'_icon" class="droppin_icon" style="position: absolute; top: '+y+'px;"> </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
Updated Code
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;"> </div><div id="'+id+'_icon" class="droppin_icon" style="position: absolute; top: '+y+'px;"> </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
Updated Code
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;"> </div><div id="'+id+'_icon" class="droppin_icon" style="position: absolute; top: '+y+'px;"> </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
Updated Code
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;"> </div><div id="'+id+'_icon" class="droppin_icon" style="position: absolute; top: '+y+'px;"> </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
Updated Code
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;"> </div><div id="'+id+'_icon" class="droppin_icon" style="top: '+y+'px;"> </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
Updated Code
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;"> </div><div id="'+id+'_icon" class="droppin_icon" style="top: '+y+'px;"> </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
Updated Code
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;"> </div><div id="'+id+'_icon" class="droppin_icon" style="top: '+y+'px;"> </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
Updated Code
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;"> </div><div id="'+id+'_icon" class="droppin_icon" style="top: '+y+'px;"> </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
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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;"> </div><div id="'+id+'_icon" class="droppin_icon" style="top: '+y+'px;"> </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