Microsoft Virtual Earth (VE) is a map and search system comprising maps, aerial images, business directories, etc. Using the VE, you can search for businesses, addresses, as well as ask for directions (see
Figure 1).
You can access the VE via MSN Virtual Earth located at http://local.live.com/.
Microsoft exposes the Virtual Earth Map control that allows developers to embed VE maps into their own applications. You can use it to build your own custom solution using the mapping services provided by VE. The VE Map control is made up of a JavaScript page and a cascading style sheet. The VE Map control is hosted at http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js. The CSS is located at http://local.live.com/css/MapControl.css.
To get detailed help and the references to the various methods in the Virtual Map control, download the Virtual Earth SDK. As of this writing, Microsoft Virtual Earth is in version 3.0.
The Sample Application
Figure 2 shows the application I am going to build in this article. It is a Windows application that uses a WebBrowser control to display the Microsoft Virtual Earth map. Using this application, you can view maps of the world, obtain the coordinates of a particular location, as well as search for places of interests.
Figure 1. Using Microsoft's Virtual Earth.
|
|
Figure 2. The basic UI of the sample application for this article is shown here. |
Version 3.0 of Virtual Earth introduced a new Bird's Eye View feature, which allows you to view a location from above.
Figure 3 shows a bird's eye view of the Golden Gate Bridge.
Building the User Interface of the Application
Using Visual Studio 2005, create a new Windows application and name it C:\VirtualEarth. Populate the default Form1 with the following controls (see also Figure 4):
- GroupBox controls
- WebBrowser control
- Label controls
- TextBox controls
- Button controls
Figure 3. Viewing the Golden Gate Bridge using the new bird's eye view feature.
|
|
Figure 4. Populate the default Form1 using the controls shown. |
The next step is to create an HTML file to contain all the necessary JavaScript functions to interact with the VE map.
Add an HTML page to the project (right-click on project name in Solution Explorer and then select Add—>New Item… Select HTML Page). Name the HTML page VirtualEarth.html.
Populate the HTML page with the following:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Virtual Earth</title>
<link href="http://local.live.com/css/MapControl.css"
type="text/css" rel="stylesheet" />
<script type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js">
</script>
<script type="text/javascript">
var map = null;
//---Update the position of the map in the TextBox controls---
function updatePosition(e)
{
window.external.mapPositionChange( _
e.view.latlong.latitude,_
e.view.latlong.longitude);
}
//---Go to a particular location on the map---
function goto_map_position(lat, lng)
{
map.PanToLatLong(new VELatLong(lat,lng));
}
//---Find a specific location---
function findlocation(location)
{
map.FindLocation(location);
}
//---Load the Map---
function loadMap()
{
container = document.getElementById("VirtualEarthMap");
container.style.width = 633;
container.style.height = 400;
//---instantiate the VE map---
map = new VEMap("VirtualEarthMap")
map.LoadMap(new VELatLong(38.898748, -77.037684), 12 , _
'r' , false);
//---Attach the event handlers for the various events---
map.AttachEvent("onendcontinuouspan", updatePosition);
map.AttachEvent("onendzoom", updatePosition);
map.AttachEvent("onclick", updatePosition);
}
</script>
</head>
<body onload="loadMap()" style="margin: 0px">
<div id="VirtualEarthMap">
</div>
</body>
</html>
The VirtualEarth.html page contains a reference to the VE Map control (.js) as well as the CSS file (.css). It also contains four JavaScript functions:
- updatePosition()—Displays the currently selected position on the map by calling the mapPositionChange() method defined in the code-behind of Form1 (more on this later).
- goto_map_position()—Goes to a particular location on the map based on the latitude and longitude specified.
- findlocation—Finds a location using a search string.
- loadMap()—Loads the map with the various parameters such as size of the map, zoom level, latitude and longitude, etc. It also attaches event handlers to the various events so that when certain events happen, the appropriate event handler will be fired.
The following events are monitored:
- onendcontinuousspan—Occurs when a pan of the map ends.
- onendzoom—Occurs when the map zoom ends.
- onclick—Occurs when the user clicks on the map.
You would also need to set the Copy to Output Directory property of VirtualEarth.html to "Copy if newer" (via the Property window) so that the HTML page is deployed during runtime.
