RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Virtual Earth 101 : Page 3

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.


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 = 
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 = _
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

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.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date