VirtualEarth MSDN Blog
05-20-2008, 01:50 AM
<p>I wrote a little mashup for Where 2.0 that shows some functionality I've always wanted and was just too lazy...I mean busy! to get it done. The idea is that if I ever wanted to know what the lat/lon of a specific location on a map is (since I write a few geo-apps) all I wanted to do was click on the map (or in this case an aerial photo). In Virtual Earth 6.1, I had to take it a step further and reverse geocode the lat/lon for an address. I got really greedy and wanted to show a Bird's Eye image. Well, here we go:</p> <ol> <li>Click on any location (or friend's / enemy's house)</li> <li>Provide me with the lat/lon</li> <li>Provide me with the address</li> <li>Provide me with a Bird's Eye Photo</li></ol> <p><a href="http://blogs.msdn.com/blogfiles/virtualearth/WindowsLiveWriter/UsingPhotostoGetAddresses_B38E/image_2.png"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" border="0" alt="image" src="http://blogs.msdn.com/blogfiles/virtualearth/WindowsLiveWriter/UsingPhotostoGetAddresses_B38E/image_thumb.png" width="521" height="327"></a> </p> <p>I have to warn you, the app isn't totally stable but it works pretty well. Click anywhere on the map and you'll get a pin. Hover over the pin and you'll get a popup with the closest address to that respective point on the map. There's a button in the popup which you can click and get a Bird's Eye image of that location. You'll need to move your mouse of the Bird's Eye photo so it stays and you can't navigate it, but I thought I'd at least get the code out there for others to help me perfect it. Also, I didn't put great coding practices out there so no try / catches or exception handling. Sorry - this is quick and dirty folks!</p> <p>The code is documented below. I posted it the app up to <a href="http://cid-83cd5b53d42d08cb.skydrive.live.com/self.aspx/Public/where20-clickaddress.htm" target="_blank">my SkyDrive</a> for those of you who don't code, but want to see the application in action.</p> <p><em><font face="Courier New"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "</font></em><a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd""><em><font face="Courier New">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</font></em></a><em><font face="Courier New">><br><html><br> <head><br><!-- saved from url=(0014)about:internet --><br> <title>Clickable Address Finding</title><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </font></em> <p><em><font face="Courier New"> <script type="text/javascript" src="</font></em><a href="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1""><em><font face="Courier New">http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"</font></em></a><em><font face="Courier New">></script> </font></em> <p><em><font face="Courier New"> <script type="text/javascript"><br> var map = null;<br> var locations = null;<br> var pixel = null;<br> var clickEvent = null;<br> var LL = null;<br> var BEMap = null; </font></em> <p><em><font face="Courier New"> function FindLocation()<br> {<br> map.Find(null, txtGeocode.value);<br> } </font></em> <p><em><font face="Courier New"> function GetMap()<br> {<br> map = new VEMap('myMap');<br> map.LoadMap(new VELatLong(37.6028082592364, -122.37150549888612), 17, VEMapStyle.Hybrid); </font></em> <p><em><font face="Courier New"> map.AttachEvent("onclick", PixelClick);<br> } </font></em> <p><em><font face="Courier New"> function PixelClick(e)<br> {<br> var x = e.mapX;<br> var y = e.mapY;<br> pixel = new VEPixel(x, y);<br> LL = map.PixelToLatLong(pixel); </font></em> <p><em><font face="Courier New"> map.FindLocations(LL, GetResults); </font></em> <p><em><font face="Courier New"> } </font></em> <p><em><font face="Courier New"> function GetResults(locations)<br> {<br> var strOutput="Address: ";<br> if(locations)<br> {<br> for(var i=0;i<locations.length;i++)<br> {<br> strOutput+=locations[i].Name; </font></em> <p><em><font face="Courier New"> strOutput+="<br/><br/>Lat: " + LL.Latitude + "<br>Long:" + LL.Longitude;<br> var strBERequest = " <input type='button' value='BE' onclick='GetBEMap(LL);' size=10><br><div id='myBEMap' </font></em> <p><em><font face="Courier New">style='position:fixed; width:400px; height:300px;'></div>";<br> var myPushpin = new VEShape(VEShapeType.Pushpin, LL);<br> strOutput+=strBERequest;<br> myPushpin.Title = strOutput;<br> myPushpin.SetDescription = strOutput; <br> map.AddShape(myPushpin); <br> }<br> }<br> else<br> {<br> strOutput+='No Result found.';<br> } </font></em> <p><em><font face="Courier New"> } </font></em> <p><em><font face="Courier New"> function GetBEMap(LatLong)<br> {<br> BEMap = new VEMap('myBEMap');<br> BEMap.LoadMap(new VELatLong(LatLong.Latitude, LatLong.Longitude), 19, VEMapStyle.BirdseyeHybrid);<br> BEMap.HideDashboard();<br> } </font></em> <p><em><font face="Courier New"> function ClearPins()<br> {<br> map.DeleteAllShapes(); <br> } </font></em> <p><em><font face="Courier New"> </script><br> </head><br> <body onload="GetMap();"><br> <p>Geocode: <input type="text" name="txtGeocode" size=30><input type="button" value="Find!" onclick="FindLocation();"> </font></em> <p><em><font face="Courier New"> <div id='myMap' style="position:relative; width:1000px; height:600px;"></div><br> <br><input type="button" value="Clear Pins" onclick="ClearPins();"><br/><br> </body><br></html></font></em> <p>Copy. Paste. Run.</p> <p>For those of you who are going to ask, no you can't click a Bird's Eye photo in the map control and get the lat/lons. We don't expose lat/lons in Bird's Eye mode. </p> <p>CP</p><img src="http://blogs.msdn.com/aggbug.aspx?PostID=8521220" width="1" height="1">