devxlogo

Virtual Earth 101

Virtual Earth 101

read somewhere that nearly 80 percent of all data has some location-related aspect. Some examples of common location-related data questions might include:

  • Where do we ship these orders?
  • Where are flood plains located, and what rainfall amounts are problematic for them?
  • Where are vendors and/or customers located?
  • What delivery route should we use?
  • Can we track shipments using GPS?
  • Where are voting districts located?
  • Where are the best hospitals located?
  • Where are the sales regions that produce the most revenue?

And so on. It’s highly likely that a significant portion of the data you work with has a location-related aspect as well. Presenting this information visually could lead to better management decisions or even possibly uncovering trends that were not previously evident. A good application can present this information using a location-oriented approach. That’s where Microsoft Virtual Earth fits in.

This article aims to start you on your way developing applications with Virtual Earth, and get you thinking outside the box regarding the way you display information to your web site visitors or your corporate management.

For example, consider a postal code sales report sorted in descending order by sales percentage. Maybe you could improve upon that report by presenting the data as a pie chart to help management see how specific postal codes compare to each other. Taking that idea even further, you could overlay that same information on a map, which reveals that the top three postal codes are all on one side of a particular highway. Maybe that’s important, maybe it’s not?but that fact would go unnoticed on a report or a pie chart. Geographically visualizing data takes the analysis to an entirely new level.

Virtual Earth makes it easy to get started developing location-based applications, but first you’ll need to decide which technology you want to use. You have two choices. One uses the Virtual Earth AJAX Map Control, where all the coding is done in JavaScript. The AJAX Map Control’s primary advantage is that it’s platform independent. Though it works in ASP.NET, it doesn’t require ASP.NET. You can use it on any web development platform.

The other option uses the ASP.NET Map Control contained in the just released Windows Live Tools for Visual Studio November 2008 CTP. The ASP.NET Map Control’s advantages are that you can control it via managed code (Visual Basic, C# or any .NET language) and it substantially reduces or totally eliminates the amount of JavaScript code you need to write.So should you choose managed code or JavaScript? I don’t know about you, but I’ll go with managed code every time. However, this article shows examples of both.

But I’m getting ahead of myself. Let me back up and start with an answer to the question, what is Virtual Earth?

What Is Virtual Earth?

Virtual Earth is a group of services from Microsoft that provides a high-quality geospacial data and imagery platform for you to work with. Unfortunately that sounds like a Microsoft definition. What that really means is that Microsoft provides developers with a platform, API, and other tools for visualizing data on a map. That data could be something as simple as pushpin points indicating where retail stores are located, or lines connecting points, or polygons covering a geographic area, or a combination of all three.

Virtual Earth allows you to add content in several ways. You can add points, lines, and polygons via code, or you can import data from other locations such as GeoRSS feeds, Keyhole Markup Language (KML), or GPS eXchange (GPX) files. The examples first show how to add content to a map using code, and then move on to importing data from a GeoRSS feed.

The Virtual Earth platform consists of a number of features, including: imagery, buildings, geocoding, Yellow Pages and points of interest (POI), traffic, search and proximity, routing and directions, 3D models, and more. These features are delivered by two separate but complimentary pieces: the Virtual Earth AJAX Map Control and (new to version 6.2), Virtual Earth Web Services 1.0.

You can learn much more about Virtual Earth, download the SDK, check out Virtual Earth team blogs, and so on at http://dev.live.com/virtualearth.

Editor’s Note: This article was first published in the January/February 2009 issue of CoDe Magazine, and is reprinted here by permission.

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:

         My First Map            
?
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 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

tag located in the . 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).

 

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