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.
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
My First Map
|Figure 1. Default Map: Virtual Earth displays a default map when you don’t indicate a specific location.
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).
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).
Refers to the location of the map center.
Specifies the initial zoom level for the map.
Specifies which type of map to display, road, aerial, or hybrid for example. Use the VEMapStyle enumeration for all the possible values.
Specifies if the map location is fixed or not. This determines if the user can click and drag to change the map location.
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.
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 line defining the map control.
Determining Latitude and Longitude Coordinates
I am a lifelong Miami Dolphins football fan. I have been since I was a kid growing up in South Florida but even I did not know that 25.957948, -80.238849 are the latitude and longitude coordinates at the center of the 50-yard line in Miami Dolphin Stadium (see Figure 5). How do I know that now? Because Virtual Earth provides map events that you can code handlers for. Take a look at the line immediately following the map.LoadMap line in Listing 1. The AttachEvent method specifies that the onclick event will be handled by the OnClickHandler function. Passed into the OnClickHandler is the event argument, e, which provides the button clicked and the x and y coordinates for the location clicked. The VEPixel object created from the e.mapX and e.mapY coordinates gets passed into the map's PixelToLatLong method to create the clickedLatLong object. The clicked position's latitude and longitude coordinates are then assigned to their respective locations on the screen.
|Figure 5. Dolphin Stadium: Here's a Virtual Earth view of Dolphin Stadium.
|Author's Note: See the "Mouse Events" section in the Virtual Earth Map Control SDK for additional supported mouse events.
Ogres Are Like Onions
|Figure 6. Microsoft Campus Map with Overlays: This map identifies some of the buildings on the Microsoft campus.
If you have seen the move Shrek, then you know that ogres are like onions; they have layers. Virtual Earth maps are like onions as well?they also have layers. Adding content to a map involves adding items such as pushpins, polylines, or polygons to a layer, and then adding that layer to a map. For example, Listing 2 takes the map of the Microsoft campus you saw earlier and adds a few pushpins, lines, and a polygon to produce the map in Figure 6.
The CreateLayer function creates the layer to contain the map objects, then adds All the Virtual Earth objects by calling the AddPushpins(), AddPolylines(), and AddPolygon() functions. Listing 2 introduces two key classes: VEShapeLayer and VEShape.
VEShape classes represent the objects that are displayed on the map. The most important property, ShapeType, has three options: pushpin, polyline and polygon. The code in Listing 2 also demonstrates a number of other properties for the VEShape class, including setting the shape's title, description, line width, line color, URL to click for additional information, and so on. Refer to the Virtual Earth SDK for additional properties, methods, and code samples for the VEShapeLayer and VEShape classes.
You've seen the fundamentals of displaying content objects with the Virtual Earth AJAX Map Control. The next section introduces the ASP.NET Map Control contained in the Windows Live Tools for Visual Studio, November 2008 CTP.
Introducing the Windows Live Tools for Visual Studio
Microsoft released the Windows Live Tools for Microsoft Visual Studio November 2008 CTP to help developers quickly and easily add Windows Live services to their ASP.NET applications. The CTP provides a set of controls that you add to a web page to add Windows Live services into your web applications. A deeper investigation of all the tools provided in the toolkit is better left for another article, but I will say that the MessengerChat and Contacts controls do look interesting. The ASP.NET Map Control provides access to the methods and properties derived from the Virtual Earth AJAX Map Control.
After you install the toolkit and launch Visual Studio 2008, you should see the Windows Live and Virtual Earth tabs added to your toolbox (see Figure 7).
To use the control, drag the ASP.NET Map Control from the Virtual Earth tab onto a
The map displayed in Visual Studio is static and will not reflect any property changes you make until you run the page.
While being able to work with the ASP.NET Map Control at design time is nice, the real advantage is being able to manipulate and work with the control in the code-behind file. For example, this code centers the map over the Microsoft campus, zooms in to level 17, and sets the map style to Aerial.
Map1.Center.Latitude = 47.6439 Map1.Center.Longitude = -122.129 Map1.ZoomLevel = 17 Map1.MapStyle = Microsoft.Live.ServerControls.VE.MapStyle.Aerial
|Figure 9. Sample Map with Overlay: This is the map that results when you run the ASP.NET Map sample code.
The added Imports statement references the Microsoft.Live.ServerControls.VE namespace, so the code can reference the Virtual Earth classes. The Page_Load method sets the coordinates of the map, the zoom level, and the map style.
Map1.Center.Latitude = 47.6439 Map1.Center.Longitude = -122.129 Map1.ZoomLevel = 17 Map1.MapStyle = _ Microsoft.Live.ServerControls.VE.MapStyle.Aerial
Next it creates a shape layer and adds that to the map. That shape contains the pushpins, polylines and polygon.
'Add shapelayer to the map. Yes, this is done 'before items are added to the layer Map1.AddShapeLayer(layer)
|Author's Note: You can add multiple layers and control them independently. For example, you could build a map to display your retail outlets using three layers: one representing profitable stores, a second displaying the break-even stores, and the third the non-profitable stores. Using a dropdown or option buttons, you could set the Visible property for the specific layer you want to display, and include a Show All option to display all of them concurrently.
After creating all the pushpins, Listing 3 creates the polyline, which uses a list of points to indicate the path of the line on the map.
Finally, Listing 3 creates a polygon, sets some properties for it, and then creates the list of points that define the polygon. Note how several of the properties use HTML markup. If you have ever wondered how pictures, text, graphics, links, etc., appear when you select an item on a map, you now know. Another property to take a look at is CustomIcon. This example points to a graphic file on a remote web server; however, it could have referenced a graphic stored on the local web server. Although space available here prevents further examples, you should take the time to review the Shape class to see what else you might want to use.
Importing GeoRSS Data
Now that you have seen how to create maps and manually add shapes (pushpins, polylines and polygons) with both the AJAX Map Control and the ASP.NET Map Control, I'll show you how to import data to overlay your map.
GeoRSS is a variation on the popular RSS format that adds tags for point, polyline, and polygon data. For example, Listing 4 contains the same pushpoint, polyline, and polygon information used to create the AJAX Map of the Microsoft campus earlier in the article.
At this point you should recognize some of the tags, including the title and description. Obviously the
Importing GeoRSS Data with the AJAX Map Control
In Listing 5 you can see that all the code required to add those map objects manually has been stripped out and replaced with these three lines.
var mylayer = new VEShapeLayer(); var veLayerSpec = new VEShapeSourceSpecification( VEDataType.GeoRSS, "MSFT_AjAX.xml", mylayer); map.ImportShapeLayerData(veLayerSpec, null);
|Figure 10. GeoRSS Data Import: This is the map displayed after importing the GeoRSS data.
The preceding code creates a new VEShapeLayer to contain the imported data points. Next, it creates a VeShapeSourceSpecification object, which specifies the import format (VEDataType.GeoRSS), the name of the GeoRSS file (MSFT_AJAX.xml), and the layer it should be imported into (mylayer). Finally, it calls the map's ImportShapeLayerData method to import the data.
Listing 4 contains the GeoRSS data being imported in the preceding example. Running the page from Listing 5 results in the same map being displayed (see Figure 10) as the earlier example that adds the map objects manually.
Importing GeoRSS Data with the ASP.NET Map Control
The steps to import GeoRSS data using the ASP.NET Map Control are very similar. The code below imports an existing GeoRSS file (MSFT_ASPNET.xml) and displays it.
Imports Microsoft.Live.ServerControls.VE Partial Public Class GeoRSS_ASPNET Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load 'Initialize map properties Map1.Center.Latitude = 47.6439 Map1.Center.Longitude = -122.129 Map1.ZoomLevel = 17 Map1.MapStyle = _ Microsoft.Live.ServerControls.VE.MapStyle.Aerial 'Create new layer to contain shapes Dim layer As New ShapeLayer Map1.AddShapeLayer(layer) Dim ShapeSpecs As New ShapeSourceSpecification( _ DataType.GeoRSS, "MSFT_ASPNET.xml", layer) Map1.ImportShapeLayerData(ShapeSpecs, "", True) End Sub End Class
The preceding code first initializes the initial map position, type, and zoom level. Next a shape layer is created and added to the map. The import happens on the next two lines. A ShapeSourceSpecification object is created with the import type specified (GeoRSS), the name of the GeoRSS file to import, and finally the layer to import the data on to.
|Figure 11. Map with HTML Markup: This map results from importing the GeoRSS data with HTML markup included in the data.
The DataType enum values are GeoRss, ImportXML, and VECollection. ImportXML is used primarily to import KML files, while VECollection is used to import collections you may have created on Virtual Earth. I created Virtual Earth collections to get the latitude and longitude coordinates for all the samples in this article.
The GeoRSS data imported into the ASP.NET Map Control (see Listing 6) is similar to the data used with the AJAX Map Control example, but it differs in the polygon section at the end of the file. Just like the HTML markup added to some of the properties when adding map objects manually earlier, you can add HTML markup to the GeoRSS file (as shown here) to provide a richer user experience.
Additional Data Importing Options
The two Virtual Earth map controls can import more than just GeoRSS formatted data. Other supported formats include KML, GPX and VECollection. Keyhole Markup Language (KML), like GeoRSS, is an XML-based format for managing the display of geospatial data in Google Maps and Google Earth. The GPS eXchange format (GPX) is a format for managing GPS data.
Another prime candidate for importing data is SQL Server. While SQL Server 2005 does not have the new geospacial data types that SQL Server 2008 provides, you can easily store latitude and longitude values in your databases. For example, you could create a query to generate a list of retail stores along with their address, website URL, manager name, phone number, latitude and longitude coordinates, and so on to generate a GeoRSS file that you could import into a map. You could add links to your corporate logo, store picture, etc., to create a rich user experience when people click on a specific store location.
I hope this introduction to developing Virtual Earth applications gets you thinking about new ways of delivering data to your users. There is still much to learn. For example, SQL Server 2008 has new geospacial data types that are tailor made to working with Virtual Earth. The Virtual Earth MapCruncher feature allows you to overlay your own map images over the Virtual Earth maps. You can learn more about MapCruncher or download it here. The Virtual Earth Web Services 1.0, new in version 6.2, provides imagery, search, geocoding, and routing services.