azxc


Is possible on mouse click in the map to see lat long (and other information) in a white box like in dev.live.com/virtualearth/sdk or in a custom "popup" box

Thanks




Re: onclick map lat long

SoulSolutions


Check out:

http://www.viawindowslive.com/Resources/VirtualEarth/VirtualEarthLocationFinder.aspx

It shows the cursor lat/long int he bottom left corner on mousemove and if your right click you get a dragable point populating the textboxes, you can even copy it as a "new VELatLong()" to the clipboard!

View source for the code.

John.







Re: onclick map lat long

azxc

Thanks SoulSolutions,

it was just what I was looking for.
I am not expert, but i don't see the code, i can add the frame into my web page, but not the find and lat long, makes sense
Probably something escapes, excuse me.
Cheers





Re: onclick map lat long

SnoopDoug_98205

Are you talking about a Javascript alert box The following code pops up one that shows the latitude and longitude for the center of the current map (it starts out in Seattle):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx v=5"></script>

<script>
var map = null;
var pinPoint = null;
var pinPixel = null;

var Seattle = new VELatLong(47.604137558895103, -122.3297595977783);

function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(Seattle, 12 );
}

function showInfo()
{
var info = "";

var center = map.GetCenter();

info += "Latitude:\t\t" + center.Latitude + "\n";
info += "Longitude:\t" + center.Longitude;

alert(info);
}
</script>

<title>Virtual Earth Test</title>
</head>

<body onload="GetMap();">

<h1>Virtual Earth Test</h1>

<p>
<input id="btnShowInfo"
type="button"
value="Get Lat/Long"
name="showinfo"
onclick="showInfo();">
</p>

<p>&nbsp;</p>

<div id='myMap' style="position:absolute; width:400px; height:400px;"></div>

</body>
</html>





Re: onclick map lat long

SoulSolutions

Oh sorry, yes I put it in an Iframe just becouse the CMS was playing up.

the whole code for you. Any questions just ask, probably lots more then you need but just hopefully give you ideas.

John.

Code Snippet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Location Chooser, right click on the map!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html {max-height:100%;overflow:hidden;background:black;font:12px arial;}
#toolpanel {position:absolute;left:500px;top:100px;z-index:1000;background:white;opacity:0.9;filter:alpha(opacity=90);padding:4px;border: 1px solid black;}
#infopanel {position:absolute;left:10px;top:340px;width:150px;height:20px;z-index:1000;}
.button {cursor:pointer; border: 1px solid black; padding:2px; background:#FFFFF0;}
</style>
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx v=5"></script>
<script type="text/javascript">
//the map object
var map = null;
var pin = null;
var mode = 0;

//load map
function Page_Load() {
map = new VEMap('mymap');
map.SetDashboardSize(VEDashboardSize.Tiny);
map.LoadMap(new VELatLong(0, 0), 1, VEMapStyle.Road, false, VEMapMode.Mode2D, false);
map.SetScaleBarDistanceUnit(VEDistanceUnit.Kilometers);
map.ShowFindControl();
map.AttachEvent("onclick", onMapClick);
map.AttachEvent("onmousemove", onMapMouseMove);
map.AttachEvent("onmouseover", onMapMouseOver);
map.AttachEvent("onmousedown", onMapMouseDown);
map.AttachEvent("onmouseup", onMapMouseUp);
}

function onMapMouseDown(e) {
if (e.leftMouseButton && e.elementID) {
mode=1;
document.getElementById("toolpanelDisplay").value = "down";
map.vemapcontrol.EnableGeoCommunity(true);
}
}

function onMapMouseMove(e) {
var loc = map.PixelToLatLong(new VEPixel(e.mapX, e.mapY));
document.getElementById("infopanel").innerHTML = round5dec(loc.Latitude) + ", " + round5dec(loc.Longitude);
if (mode==1) {
SetPin(loc);
}
}

function onMapMouseUp(e) {
if (mode==1 && e.leftMouseButton) {
document.getElementById("toolpanelDisplay").value = "up";
map.vemapcontrol.EnableGeoCommunity(false);
mode=0;
var loc = map.PixelToLatLong(new VEPixel(e.mapX, e.mapY));
SetPin(loc);
}
}

function onMapClick(e) {
if (e.rightMouseButton) {
var loc = map.PixelToLatLong(new VEPixel(e.mapX, e.mapY));
SetPin(loc);
}
}

function SetPin(loc) {
document.getElementById("toolpanelDisplay").value = "new VELatLong(" + round5dec(loc.Latitude) + "," + round5dec(loc.Longitude) + ")";
document.getElementById("inputlat").value = round5dec(loc.Latitude);
document.getElementById("inputlon").value = round5dec(loc.Longitude);
if (pin) {
//relocate
pin.SetPoints(loc);
}else
{
//create
pin = new VEShape(VEShapeType.Pushpin, loc);
pin.SetCustomIcon("crosshair.png");
map.AddShape(pin);
}
}

function SetLocation() {
var lat = parseFloat(document.getElementById("inputlat").value);
var lon = parseFloat(document.getElementById("inputlon").value);
if (!isNaN(lat) && !isNaN(lon) && lat>=-90 && lat<=90 && lon>=-180 && lon<=180) {
var loc = new VELatLong(lat,lon);
SetPin(loc);
map.IncludePointInView(loc);
}else
{
alert("Not valid decimal degrees");
}
}

function onMapMouseOver(e) {
if (e.elementID){
return true;
}
}

function round5dec(value) {
return Math.floor(value * 1e5)/ 1e5;
}

//Clean up all objects
function Page_Unload() {
if (map!=null) {
map.Dispose();
map = null;
}
}

function CopytoClipboard() {
var holdtext = document.getElementById("holdtext");
holdtext.innerText = document.getElementById("toolpanelDisplay").value;
Copied = holdtext.createTextRange();
Copied.execCommand("RemoveFormat");
Copied.execCommand("Copy");
}


//set event handlers
if (window.attachEvent) {
window.attachEvent("onload", Page_Load);
window.attachEvent("onunload", Page_Unload);
} else {
window.addEventListener("DOMContentLoaded", Page_Load, false);
window.addEventListener("unload", Page_Unload, false);
}
</script>
</head>
<body scroll="no">
<div style="position:relative">
<div id="mymap" style="height: 400px; width: 680px; position: relative">
</div>
<div id="toolpanel">
Latitude:<br /><input id="inputlat" type="text" /><br />
Longitude:<br /><input id="inputlon" type="text" /><br />
<div id="toolpanelGO" onclick="Javascript:SetLocation();" class="button">Plot on Map</div><br />
<input id="toolpanelDisplay" type="text" disabled="disabled" /><br />
<div id="toolpanelcopy" onclick="Javascript:CopytoClipboard();" class="button">Copy to Clipboard</div>
</div>
<div id="infopanel"></div>
<textarea rows="50" cols="50" id="holdtext" style="display:none"></textarea>
</div>
</body>
</html>






Re: onclick map lat long

azxc

Fantastic!

One more question if i can.

Can i add X ( hide ) to find and lat long panel

For unhide probably is better add a button or reload a page.

Thanks, best regards





Re: onclick map lat long

azxc

>One more question if i can.

In reality they would be two.

How do you center the crosshair with the tip of the finger on click

Thanks , best regards





Re: onclick map lat long

SoulSolutions

Yes you could use javascript to set it to style display:none

Or change the height to just show the header.

Something like onclick="javascriptBig Smileocument.getElementByID('toolpanel').style.display = 'none';"

John.






Re: onclick map lat long

SoulSolutions

To change the offset of the icon you need to wrap it in a div with a class. add a style for left and top in your stylesheet.

pin.SetCustomIcon("<div class='pin'><img src='crosshair.png' /></div>");

John.






Re: onclick map lat long

azxc

I am not explained well or I have not understood.

I have made one custom crossair similar to your (48 x48), and if right click on the map it is looked at.
But on your map for ex at the crossroad right click appear the crosshair and
if I go over with the mouse appear the hand and
if point the finger for ex in the corner of crossroad and then click with the mouse the center of crosshair move on the tip of finger ( centered), while mine crosshair center remains to right.
It depends on the dimension of the crosshair.png or are there writing other things
Thanks, best regards




Re: onclick map lat long

SoulSolutions

By default the image is centered so if you make your crosshair with the cross in the dead centre like I did you don't need to do anything.

But for eample with pins typically you want the point of the pin to be the point on the map, to move it off centre you need to set a style and use an offset.

I agree it is confusing and would make a good little article to explain and give samples, I'll add it to the list.

John.






Re: onclick map lat long

azxc

Ok , thanks a lot.

Meanwhile can you send me your crosshair.png, or share it

Thanks, best regards

PS I don't understand because my image doesn't work.





Re: onclick map lat long

SoulSolutions

I'm certainly no designer but here you go:

http://www.viawindowslive.com/portals/0/Resources/virtualearth/locationfinder/crosshair.png

BTW pngs with alpha transparentcy don't work in IE6, your best to provide a GIF for IE6.

John.






Re: onclick map lat long

azxc

I am not an expert but probably I am becoming crazy.
I use in local site, so my address is:
I have copied the code above with the only modification of
<div id="mymap" style="height: 600px; width: 1000px; position: relative"> like my site
, but there are no differences with the small one-original.
I have copied your png file in Mysitefolder.
Your png is 30x30, black , my 48x48, other color , and thin line.
At the right clik of mouse (or second click) your is centered in the crossing between the index finger and the middle finger( "1mm" from index finger tip to center- line cross), mine on the right side of the hand ("5mm")
On line at
in the same PC all is ok; at the right click of mouse the line cross (crosshair.png) is centered in the tip of index finger.
In conclusion how can I center the line image crossing with the tip of the finger
Thanks, best regards
PS excuse me if i continuous to write. use IE 7. i have tested in other pc and no works too.




Re: onclick map lat long

azxc

Other question in the code above.

Is it possible to add more than one event to mouseover

For ex if i add a pushpin to map, now with the mouseover, i can see the lat long but no popup details and the same with route steps.

Thanks , best regards