Web Services

Build Geographic Mashups

Take advantage of Microsoft Virtual Earth to build a popular new Internet application type: the mashup.

• By Peter Varhol
• 02/01/2007

Geographic data has always been available in abundance. You can get travel destination maps from travel sites, hotel locations on hotel sites, train and subway information on regional transportation sites, and almost any travel Web site today includes maps that you can manipulate to one degree or another.

The problem is that many sites are sponsored by particular hotel chains, airlines, or cities, so they tend to present only the specific data that makes business sense to them individually, and you rarely get multiple types of geographical information all working together on any one site. For example, it can be difficult to match up the best way to get from a particular airport to a given hotel. And you can be almost certain that you won't find an application or third-party Web site out there that provides geographic data, information, or tools that addresses all your company's particular needs—unless you write it yourself.

Now you could try writing a complete application from scratch if you had the time and resources, but odds are that, like all of us, you are always short on both. Fortunately, you don't have to reinvent the wheel every time you need a customized solution. You can take existing APIs that perform specific tasks—such as Microsoft's Virtual Earth digital mapping application—and by integrating data from other sources, you can create a highly customized mapping application specific to your particular needs. The type of application where you aggregate data from multiple sources is called a mashup. If one or more of the sources is a digital map, this is a geographic mashup. The ability to combine maps with data from other sources enables you to create distinctive applications that combine locations with data about those locations.

Today, you can use maps in applications that you create to produce maps with highly specialized purposes. For example, you might want to customize a sales force travel expense application to include maps highlighting different customer locations. Or an inventory control application that could actually pinpoint specific shipments on a digital map. This ability began with the API provided by Google first for Google Maps, then for Google Earth. Shortly thereafter, Microsoft introduced Virtual Earth and its own API. The Virtual Earth API is exceptionally easy to use and provides a great deal of power for integrating geographic data with digital maps.

The Virtual Earth API not only provides access to maps of almost any spot on earth, it also allows you to resize the maps, add pushpins to represent a variety of locations, search and find locations, get routes, and add custom layers. This flexibility enables you to design a map application for just about any use.

The Virtual Earth API is robust and powerful yet simple enough that you can quickly begin taking advantage of it programmatically. Everything starts with the Virtual Earth Map Control, which is now at version 3.1. You call this control from the developer site of Windows Live, dev.live.com/virtualearth/. This API provides many methods for manipulating the map location, size, and other characteristics.

You can best understand the Virtual Earth API by walking through the various examples included in the SDK. They can be highly instructive in terms of getting a handle on the API.

The Virtual Earth API is a Web service that you can call for free from dev.virtualearth.net. Unlike Google Earth, Virtual Earth doesn't require that you register prior to trying to get a token to call the API. Anyone can use it at any time. Note that Virtual Earth, as well as the entire Microsoft Live site, is still considered in beta, notwithstanding its current versioning number of 3.1.

Getting Started
Visual Studio developers can access the Virtual Earth API through Web scripting using ASP.NET. You can start with either an HTML or an ASP.NET project.

On any page where you want to insert a map you have to add a reference to the Virtual Earth control in the header:

<script src="http://dev.virtualearth.net/mapcontrol
     /v3/mapcontrol.js"> </script>

The page also requires a DIV element to designate a location on the page that will contain the map:

<div id='myMap' style="position:absolute; width:400px; 
   height:400px;"></div> 

You need to keep a couple points in mind. First, the DIV element provides several parameters with the style tag. In this case, it designates the position of the map on the page as well as the size. You can change both to accommodate different map sizes.

Next, you need to create a new instance of the VEMap object and call the LoadMap function:

var map = new VEMap('myMap'); 
map.LoadMap();

The entire page looks like this:

<head>
   <title></title>
   <meta http-equiv="Content-Type" 
      content="text/html; charset=utf-8">
   <script src="http://dev.virtualearth.net/
      mapcontrol/v3/mapcontrol.js"></script>
   <script>
   var map = null;

   function GetMap()
   {
      map = new VEMap('myMap');
      map.LoadMap();
   }
   </script>
</head>
<body onload="GetMap();">
   <div id='myMap' style="position:relative; 
      width:600px; height:400px;"></div>
</body>
</html>

Compiling and executing this code as an ASP.NET application calls the map control and produces the map (see Figure 1).

Searching for locations or places is also straightforward. By calling the FindLocation method of the VEMap object, you can let the user perform a search and return items that match that search. The next step is to write code enabling the user to type in a location, get back multiple matches as hyperlinks, and select the correct match (see Listing 1).

The next step is to augment the map with functionality that makes it more interesting and relevant. For example we can add pushpins to designate specific places. You define pushpins through a method call on the map object:

      function GetMap()
      {
var map = new VEMap('myMap');
map.LoadMap(new VELatLong(42.715, -71.463), 14 ,'h' , false);

var pinID = 1;
   var pin = new VEPushpin(pinID, 
      new VELatLong(42.715, -71.463), null, 
      'This is my house ');
   map.AddPushpin(pin);
   }

This code illustrates how easy it is to define a sequence number for the pushpin and use it as a part of the pushpin definition. The definition itself has four parameters: the pushpin number, a location, an image designation, and a label. This example uses everything but the image. The image parameter lets you call an image from a known location and provide commentary for that image. You can call the pushpin that you define by invoking the AddPushpin method of the map object.

Note that the code uses longitude and latitude to designate the pushpin location. Virtual Earth gives you other ways of defining the pushpin's location, including by street address or place name. This versatility lets you accept location data in a variety of different measures and still plot its position on a map.

The map zooms to fit all of the defined pushpins automatically. You can also control the zoom manually by using the Zoom parameter on the LoadMap method. The next step is to execute this page using the default zoom level (see Figure 2).

Route and Find Info
The Virtual Earth API also lets you plot a route from one location to another. This enables users of your map application to choose a starting point and a final destination, and the API will then determine the shortest way to get between those points. Virtual Earth uses the shortest (and presumably fastest) route between the two points. I can't find a way to apply another algorithm, but it might be possible to write your own. That said, the built-in algorithm to provide routes across a variety of known journeys works reasonably well. Calling for a routing is easy. Simply input a start point and end point, and the map control returns the route between them, as well as driving distance and approximate driving time. It also provides directions at key points when you move your mouse over those points on the map.

The code to return a route requires a call to the GetRoute method of the map object (see Figure 3). GetRoute takes both a starting point and a destination as input. Begin by calling LoadMap to get the default map, then call GetRoute to focus the map and highlight the derived route:

var map = null;
   function GetMap()
   {
      map = new VEMap('myMap');
      map.LoadMap();
      map.GetRoute("28 Coleridge Road, Nashua NH 
         03062", "Manchester Airport");
   }

Next, call the GetMap function when the page executes using the appropriate DIV element. In this code, the DIV element defines a relative rather than an absolute position:

<body onload="GetMap();">
   <div id='myMap' style="position:relative; 
      width:700px; height:500px;"></div>

Virtual Earth gives you several ways to define the starting point and destination. In this case, the code uses both a street address and a place name for the start and endpoints. Most of the time your users will want driving directions (rather than hiking or flying directions), so street addresses and place names are likely to be among the most common types of location references. Of course, you wouldn't normally hardwire place names into the code, as I've done here. Instead, you should set variables to accept those names as inputs from the user or from a file.

Obtain and Aggregate Data
One of the most important purposes of a mashup is to provide data accessibility where it did not exist before. Bringing together data from one location into a map that does not normally have access to that data is one of the keys to producing a compelling mashup. The Virtual Earth map control API is easy enough to use that your biggest problem will probably be where to get the data to feed into your mashup. Unless you are relying entirely on your own, internally generated data, finding data in a good format might well be the most time-consuming part of a geographic mashup.

Much data is available through RSS or Atom feeds, in XML format, or in delimited files. Look for sources with easily serializable data, and aggregate data on your site from multiple sources if necessary. These data sources should be easy to import, parse, and apply to a Virtual Earth map.

The other key to good mashups is the design of the user interface. This might be the most significant and difficult aspect of geographic mashups because data presented in different ways can mean different things to different users. Not all visualizations are created or consumed equally.

Data analysis and display has a long and storied history. According to Microsoft blogger Jon Udell, data analysis is an inherently social act. Understanding the needs of the data consumer is essential in knowing what data to combine in a geographic mashup, and how to get the visual part correct. Fortunately, Virtual Earth gives you all of the tools you need to make data from multiple sources work within a mapping application. Choosing the data, finding it in serial form, and getting the resulting visual image correct are still big jobs that you'll need to follow up on but using a tool like Microsoft's Virtual Earth in a georgraphic mashup should make the job somewhat easier.