Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Virtual Earth 101 : Page 2

Find out how to use the Virtual Earth AJAX Map Control and the Windows Live Tools for Visual Studio to add sophisticated mapping features to your web applications.


advertisement

Your First AJAX Control Map

Unlike ASP.NET controls that you drag and drop onto an ASPX page, you add the Virtual Earth AJAX Map Control to a page via JavaScript code. The code required is minimal and does not require you to download or install anything on your development machine. Although I used Visual Studio to create an ASPX page (FirstMap.aspx), I could have dropped the following code into a plain HTML page as well:

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>My First Map</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <script src="http://dev.virtualearth.net/mapcontrol/ mapcontrol.ashx?v=6.2" type="text/javascript"> </script> <script type="text/javascript"> var map = null; function GetMap() { map = new VEMap('myMap'); map.LoadMap(); } </script> </head> <body onload="GetMap();" style="font-family: Arial"> <div id='myMap' style="position: relative; width: 600px; height: 400px;"></div> </body> </html>

 
Figure 1. Default Map: Virtual Earth displays a default map when you don't indicate a specific location.
You can see that the FirstMap.aspx web form has two script sections. The first defines the reference to the Virtual Earth AJAX Map Control (v6.2), and the second contains the JavaScript code required to launch the map. The second script first defines a map variable and then defines a GetMap function, which gets called from the onload argument in the <body> tag. Therefore, when the body of the page has loaded it launches the GetMap function, which creates a new instance of the VEMap class in the <div id='myMap'> tag located in the <body>. Opening the page in a browser causes the map to be displayed. In this example, because a specific geographic location was not specified, the page displays the default map of the United States (see Figure 1). Refer to the Virtual Earth SDK for additional properties and methods for the VEMap class.

With this simple map displayed, you can find additional information pertaining to the Virtual Earth API, examples, on-line SDK, documentation, links to forums, and other developer-related information. For example, on the "Learn More" tab you will find a link to download the Virtual Earth Map Control SDK (CHM) file for offline viewing (see Figure 2).

 
Figure 2. Offline Support: The Virtual Earth Map Control SDK (VirtualEarthSDK.chm) provides offline support for the Virtual Earth API.
 
Figure 3. Sample JavaScript: The Virtual Earth Interactive SDK provides JavaScript source code to learn from.
The Virtual Earth Map Control SDK presents an interactive way to learn about the different things you can do with Virtual Earth. It displays all the JavaScript source code for every example (see Figure 3).

Location, Location, Location

 
Figure 4. Partial Campus View: This map view shows part of the Microsoft campus.
To display a specific location on the map you will need to provide the location's longitude and latitude. The process of determining the latitude and longitude coordinates of a particular location, such as an address, is called geocoding. For example, the following code displays a map centered on the Microsoft campus in Redmond (see Figure 4).

<script type="text/javascript"> var map = null; var MSFTLocation = new VELatLong(47.643900, -122.129000); function GetMap() { map = new VEMap('myMap'); map.LoadMap(MSFTLocation,16,VEMapStyle.Hybrid, false,VEMapMode.Mode2D,true); } </script>

The preceding code introduces the VELatLong class, which represents the latitude and longitude of a single point. It also expands on the arguments available for the LoadMap method (see Table 1).

Table 1. Load Map Method Arguments: The table shows the arguments available for the LoadMap method, along with an example and description for each.



Argument

Example

Description

Location

MSFTLocation

Refers to the location of the map center.

Zoom Level

16

Specifies the initial zoom level for the map.

Map Style

Hybrid

Specifies which type of map to display, road, aerial, or hybrid for example. Use the VEMapStyle enumeration for all the possible values.

Location Fixed

False

Specifies if the map location is fixed or not. This determines if the user can click and drag to change the map location.

Map Mode

Mode2D

Specifies if the map is viewed in 2D or 3D mode. 3D mode requires a browser plug-in be installed but provides a complete 3D experience without having to install client software as Google Maps does.

Display Dashboard

True

Specifies if the dashboard in the upper left corner displays the ability to switch between 2D and 3D modes.


Want to get rid of that annoying birds-eye popup displayed when the map loads? Add this code just after the <script> line defining the map control.

<!-- Hide the bird's eye notification pop-up --> <style type="text/css">#MSVE_obliqueNotification {visibility: hidden;} </style>



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap