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 methodsMethod | 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 eventsEvent 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 . |