Section 11.1. Anatomy of Virtual Earth

11.1. Anatomy of Virtual Earth

When you visit the Virtual Earth site at http://www.virtualearth.msn.com, you will see a site that looks similar to Figure 11-1. You will also notice a couple of interesting facts:

• Map interaction is enabled using the mouse and keyboard.

• Map interaction does not require a page-refresh.

• Search, pan, and zoom are preformed asynchronously for a better user experience.

All this is made possible by using JavaScript on the client browser to communicate with the Virtual Earth servers asynchronously. One of the neat things about JavaScript is that you can look at the implementation, since the code exists on the client side. If you look at the source of the Virtual Earth site, you will notice the following JavaScript files:

MapControl.js

Defines the Map Control object and all related properties and methods.

Figure 11-1. Virtual Earth map (Color Plate 8)

VE.js

Contains the code to display the map, zoom, and pan controls. This is the core script that runs the Virtual Earth site.

Configurations.js

Contains the configuration values, such as the search service, locate service, and the map image server endpoints.

If you want to use Virtual Earth map on your site, the JavaScript you need is the MapControl.js, which can be obtained from the Virtual Earth site at: http://virtualearth.msn.com/js/MapControl.js. Even though the Map Control is completely written in JavaScript, you can create an instance just like any other object using its constructor:

     var map = new VE_MapControl(32.69, -117.13, 12, 'r', "absolute", 400, 10, 400, 300);

Don't worry about the details of the parameters yet; we will take a detailed look at these in the next section. The VE_MapControl class takes nine parameters to create a map control instance that you can use to call the methods and subscribe to its events.

Tables 11-1 and 11-2 provide a list of the important methods and events exposed by the Map Control.

Table 11-1. Map Control methods

Method	Description	Example
SetCenterAndZoom	Centers the map on the specified latitude and longitude and zooms the map to the specified zoom level.	map.SetCenterAndZoom( 47.6, // lat -122.33, //lon 12); // zoom
SetCenter	Centers the map on the specified latitude and longitude coordinates.	map.SetCenter( 47.6, // lat -122.33); // lon
SetZoom	Sets the map zoom level to the specified zoom value. Valid values range from 1 to 19.	map.SetZoom(7); //zoom
ZoomIn	Zooms in the map to one level below than the current level.	map.ZoomIn( );
ZoomOut	Zooms out the map to one level above the current level.	map.ZoomOut( );
SetMapStyle	Sets the current map style to the specified style. The map style argument should be one of the following: r Displays Road maps a Displays Aerial maps h Displays Hybrid maps (Aerial with labels)	//Set Road Map style map.SetMapStyle("r"); //Set Aerial Map style map.SetMapStyle("a"); //Set Hybrid Map style map.SetMapStyle("h");
GetCenterLatitude	Gets the map center latitude coordinate.	var latitude = map. GetCenterLatitude( );
GetCenterLongitude	Gets the map center longitude coordinate.	var longitude = map. GetCenterLongitude( );
GetZoomLevel	Gets the map's current zoom level.	var currentZoom = map. GetZoomLevel( );
Resize	Resizes the map to the specified height and width.	map. Resize(500, //width 200 //height);
PanMap	Pans the map to the specified pixel positions. The arguments are expressed as the difference between the x and y screen coordinates.	//Pan 10 pixes on X and 20 // pixels on Y map.PanMap(10, 20);
PanToLatLong(latitude, longitude);	Pans the map to the specified latitude and longitude coordinates.	map.PanToLatLong(47, -122);
AddPushpin	Adds a pushpin at the specified latitude and longitude coordinate.	map.AddPushpin( 'myPushpin', // Pin ID 47.6, // latitude -122.33, // longitude 24, // width 24, // height 'bluepin', // CSS class 'My Pushpin', // innerHtml 25 //Z-Index);
RemovePushpin	Removes the specified pushpin from the map.	map.RemovePushpin( 'myPushpin'); //Pin ID
ClearPushpins	Removes all the pushpins from the map.	map.ClearPushpins( );
SetViewPort	Sets the view of the map based on two latitude and longitude sets, one for the northwest corner and the other for the southeast corner.	map.SetViewport( 47.648, // latitude 1 -122.145, // longitude 1 47.6317, // latitude 2 -122.1117); // longitude 2

Table 11-2. Map Control events

Event Name	Description	Example
onMouseClick	Fires an event when the mouse is clicked on the map. The event argument exposes the latitude and longitude where the mouse click occurred.	//Wire-up the event map.onMouseClick=function(e) { alert(e.latitude+', '+e.longitude); }; // Disable the event map.onMouseClick=null;
onMapChange	Fires an event when the map has changed (such as when it has been zoomed, dragged, or panned).	//Wire-up the event map.onMapChange=function(e){ alert('map changed'); } //Disable the event map.onMapChange=null;

Using this JavaScript control, you can build applications to show anything that you can layer on top of mapsa bunch of photographs that you want to show by location (where they were taken), or a group of friends blogging from different cities who you want to show on a map. The information integration scenarios that we discussed in MapPoint 2004 and MapPoint Web Service can be also be done with Virtual Earth. The integration of information on maps as a layer is also known as Mash-up .