Prashant_Rai


Hi,

I want to put a pushpin on the map. And this pushpin should be draggable. So that when user drag this pushpin, its shows the longitude & latitude of that point & as the pushpin drags from one point to another, respected longitude & latidude value get visible.

How can I make this possible here; I didnt find any solution for this.

Also I want to use my own images instead of the pushpins.

Thank you




Re: Draggable Pushpins

SoulSolutions


using your own images is easy:

new VEPushpin(
pinID,
new VELatLong(27.705937839, 85.31556487),
'./img/poi_viewer.gif',
'Kathmandu',
'<img src="./img/Pict92.jpg"><br>'+
'One of the many rainy days we had in Kathmandu. '+
'I guess that\'s what you get for traveling during monsoon season.',
'iconStyle',
'titleSytle',
'detailsStyle'
);

The 2nd parameter is your image. The best looking pins out there use the png format with a complete alpha channel. The only drawback with this is you have to use a hack to make png's work in IE6 by using styles. Give me a yell if you need the code.

To get the lat/long for a position on the map you use:

map.PixelToLatLong(x, y);

with x and y your pixel co-ords.

Now to actually drag your pins I don't know of anything available but it should be doable.

I would remove the pin on start (click ) and put a normal div ontop of the map with the same image. Move it around the map with the cursor. And on stop (release) add a new pin at that location with the pins details. During the move you could be constantly updating some info panel with the lat/long position.

Hope that helps. You should let us know when you have it working.

John.







Re: Draggable Pushpins

Eric Ebell

Virtual Earth doesn't have built in support for dragging pushpins. But, you can accomplish dragging pushpins with JavaScript. Note: the JavaScript below will get you started, but you'll need to fine tune it.

// Mouse events for dragging a VE Pushpin

document.onmousemove = mouseMove;

document.onmouseup = mouseUp;

VEPushpin.ShowDetailOnMouseOver = false;

VEPushpin.OnMouseOverCallback = onVPushPinMouseOver;

var dragObject = null;

var mouseOffset = null;

function mouseCoords(ev)

{

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

function getMouseOffset(target, ev){

ev = ev || window.event;

var docPos = getPosition(target);

var mousePos = mouseCoords(ev);

return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};

}

function getPosition(e){

var left = 0;

var top = 0;

while (e.offsetParent){

left += e.offsetLeft;

top += e.offsetTop;

e = e.offsetParent;

}

left += e.offsetLeft;

top += e.offsetTop;

return {x:left, y:top};

}

function mouseMove(ev){

ev = ev || window.event;

var mousePos = mouseCoords(ev);

if(dragObject){

dragObject.style.position = 'absolute';

dragObject.style.zIndex = 99;

dragObject.style.top = mousePos.y - mouseOffset.y - 100;

dragObject.style.left = mousePos.x - mouseOffset.x - 820;

return false;

}

}

function mouseUp(){

dragObject = null;

}

function makeDraggable(item){

if(!item) return;

item.onmousedown = onDraggableMouseDown;

}

function onDraggableMouseDown(ev)

{

dragObject = this;

mouseOffset = getMouseOffset(this, ev);

return false;

}

function onVPushPinMouseOver (x, y, title, details)

{

var pinDetails = details;

var detailArray = pinDetails.split("_");

var pinID = detailArray[1];

var divID = "VPOP" + pinID;

var e = document.getElementById(pinID + "_" + vMap.GUID);

//makeClickable(e);

makeDraggable(e);

}