Section 12.1. Displaying a Map

12.1. Displaying a Map

Let's begin by seeing what it takes to add a Virtual Earth map to a web page. Virtual Earth is not a core Atlas component (i.e., it is not part of the file Atlas.js). Instead, it is available as part of in the AtlasUIMap.js JavaScript component, which you can load using this markup for the ScriptManager element:

 <atlas:ScriptManager runat="server" >   <Scripts>     <atlas:ScriptReference ScriptName="AtlasUIMap" />   </Scripts> </atlas:ScriptManager>

By referencing the AtlasUIMap.js file, you do not get new <atlas:xxx> controls, but new markup options for the xml-script portion of the page: the <virtualEarthMap> xml-script component that loads map data. The component provides a variety of attributes, but the following ones are the most important:

id: ID of both the map control and the HTML element that will display the map.
latitude: The latitude of the center of the map.
longitude: The longitude of the center of the map.
mapStyle: The style of the map. Available options are Aerial (photographs), Road (street data), or Hybrid (both).
zoomLevel: The zoom level of the map, which can range from 1 (you see the whole world) up to 17 (street level details). Depending on the area, not all zoom levels may be available. You have the best chances for zoom level 17 on the North American continent.

The following is some xml-script that uses the virtualEarthMap component to display a hybrid map of the area adjacent to the Indianapolis Motor Speedway. I found the values for longitude and latitude data at http://nassenstein.com/earth/sport.html.

 <script type="text/xml-script">   <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">     <components>     <virtualEarthMap      latitude="39.794624" longitude="-86.234749" zoomLevel="15" mapStyle="Hybrid" />     </components>   </page> </script>

A map needs an HTML element to display it, and the id of the element must match the id of the map control. In this example, we'll create a <div> container and name it "map."

 <div ></div>

To size the map so it doesn't fill the whole screen, you should style the <div> container using CSS. With the position: absolute attribute value pair and a fixed width and height, you can control the size of the map with CSS markup like the following:

 <style type="text/css"> #map {   position: absolute;   width: 640px;   height: 480px;  overflow: hidden; } </style>

And that's it! Example 12-1 contains the complete markup and script you need to display a hybrid map of the Indianapolis Motor Speedway and nearby neighborhoods.

Example 12-1. Adding a Virtual Earth map to a page with Atlas

 VirtualEarth.aspx <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">   <title>Atlas</title><style type="text/css">#map {     position: absolute;     width: 640px;     height: 480px;     overflow: hidden;}</style> </head> <body>   <form  runat="server">     <atlas:ScriptManager runat="server" >     <Scripts>     <atlas:ScriptReference ScriptName="AtlasUIMap" />     </Scripts>     </atlas:ScriptManager>     <div ></div>   </form>   <script type="text/xml-script">     <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">     <components>     <virtualEarthMap      latitude="39.794624" longitude="-86.234749"     mapStyle="Hybrid" zoomLevel="15" />     </components>     </page></script> </body> </html>

Figure 12-1 shows how the map looks in a browser. To test the code for yourself, copy and paste it. This is done via JavaScript, but with JavaScript originally provided by Virtual Earth, not Atlas. Atlas dynamically loads some helper libraries from the Virtual Earth server, providing the additional functionality.

Figure 12-1. Displaying the Indianapolis Motor Speedway with Atlas and Microsoft Virtual Earth