Virtual Earth 101 : Page 3

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.

A VEShapelayer class contains VEShapes (such as pushpins, polylines, and polygons). You can create shape layers manually via JavaScript code or have them created for you based on data imported from GeoRSS data, custom map tiles, or from Live Search Map collections. This article covers importing data a little later.

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.

So what is the big deal about the ASP.NET Map Control? It sounds like it provides all the same features as controlling the Virtual Earth control via JavaScript code. The big deal is that you can implement nearly all the same functionality using managed code. That's right, you can use Visual Basic, C#, or your favorite .NET language with the control—and like other ASP.NET controls, it provides a complete drag and drop experience inside Visual Studio 2008. If you are still using Visual Studio 2005, now might be the time to upgrade to Visual Studio 2008 because the Windows Live Tools for Visual Studio requires Visual Studio 2008 or Microsoft Visual Web Developer 2008. You can find a link to the ASP.NET Map Control on the Windows Live Tools for Visual Studio page.

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).

Figure 7. VS Toolbox Support: The Visual Studio Toolbox with the Windows Live and Virtual Earth tabs expanded.

Figure 8. ASP.NET Map Control Properties: Here's the ASP.NET Map Control and the VS Properties window in design mode.

To use the control, drag the ASP.NET Map Control from the Virtual Earth tab onto a <div> tag and voila!—instant map. You can size the ASP.NET Map Control with your mouse and set properties via the Properties window (see Figure 8). The control is also available and fully configurable in Source mode.

   <ve:Map ID="Map1" runat="server" 
   Height="400px" Width="400px" ZoomLevel="4" />

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.

Look closely at the code above. Do you see any JavaScript? No, you don't—and that is the primary advantage to using the ASP.NET Map Control.

As an example, here's the same map created earlier using the AJAX Map Control and JavaScript but this time using the ASP.NET Map Control. Listing 3 shows the Visual Basic code required in the Page_Load event that matches the functionality of the prior example, while Figure 9 shows that the page displays identical results.

The code in Listing 3 is little different than the JavaScript code used before except that it's managed .NET code, and the code resides in the code-behind file rather than in the file containing the markup or an external JavaScript library file.

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)