Building a Mashup of National Parks using the Atlas Virtual
Atlas has a great map control for Virtual Earth (also known as Windows Live Local). The map control makes it super easy to build a mashup with Atlas of displaying the locations of a couple of National Parks on a map.
?
The posting describes how to add and display pushpins on the map. You can download the full source-code to the application here. Updated: You can run the app on the web here. You can re-use or modify the code.
?
After the screenshots below,we will go through the steps to build the basic map parts of the application.
?
A good way to learn about it yourself is to download the sample and run it on your local system (note: if you have the free Visual Web Developer Express tool (or VS 2005) installed then you should be able to just copy the above .zip file to your local hard-drive,expand it,open the web-site and hit run).? Note: I used CSS for the style information.
?
I have also included an expanded page (default.aspx) which includes searching,listview for results and displaying pushpins on the map. ? Quick Tour of the Application
?
The basic steps map0 (basic map),map1 (pushpin),map2 (multiple pushpins from a web service),map3 (navigation). go through the steps of adding a map,displaying pushpins and basic navigation (note: the screenshots are done with FireFox – it also works with IE as well):?
?
?
The expanded page (default.aspx) provides a simple query of National Parks by state and displays them in a listview on the left and a virtual earth map on the right. You can click on the images to link NPS web pages with additional information. You can also hover on the map pushpins to display the push pun popup. (note: the screenshots are done with FireFox – it also works with IE as well):? ?
? We can type a state in the Search textbox such as
?
?? Here we see the image,title and description on the left in the listview and pushpin displayed on the map on the left. If we hover over the pushpin a popup will appear,see the next screenshot below. ?
? Here we see the map pushpin popup. We can click on the popup image to navigate to the NPS website. ?
?
Steps to building something like this ? If you want to build as basic version of this you’ll want to follow the steps below: ? Step 1) Create a new web-site using the free Visual Web Developer Express Tool (or VS 2005) and the March 2006 CTP Atlas Project Template ?
? Step 2) Add a new css stylesheet default.css to the project Website -> Add New Item -> stylesheet ?
? ? Step 3) Add the following items to the default.css stylesheet. We will add additional items to the stylesheet in the steps below. ? ??? body ??? { ??????? font-family: Verdana, Helvetica, sans-serif; ??????? color: #000000; ??????? background: #0B0B0A ??????? margin: 0px; ??? } ? ??? #map1 ??? { ??????? position: absolute; ??????? width: 800px; ??????? height: 600px; ??? } ? Step 4) In default.aspx web page <head> add a stylesheet reference to the default.aspx ? ? <link type="text/css" rel="stylesheet" href="default.css" /> ? Step 5) In default.aspx add the Virtual Earth Map stylesheet. Be sure to include the ref=”stylesheet” attribute. ? ? <link type="text/css" rel="stylesheet" href="http://dev.virtualearth.net/standard/v2/MapControl.css" /> ? Step 6) Add an atlas:ScriptManager and a ScriptReference for the AtlasUIMap.
?
??? <atlas:ScriptManager runat="server" ID="scriptManager"> ????? <Scripts> ??????? <atlas:ScriptReference ScriptName="AtlasUIMap" /> ????? </Scripts> ??? </atlas:ScriptManager>
?
Step 7) Add a div for the map to render into ? ??? <div id="map1" style="width: 800px; height: 600px; overflow: hidden"> ??? </div> ? Step 8) Add the virtualEarthMap control to the xml-script section ? ? <script type="text/xml-script"> ??? <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> ????? <components> ??????? <virtualEarthMap id="map1" latitude="42.641025" longitude="-96.240234" zoomLevel="4" mapStyle="Hybrid"> ??????? </virtualEarthMap> ????? </components> ??? </page> ? </script> ? Step 9) Your .aspx page markup should look like this: ? <%@ 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> ? <title>Map 0 - Atlas Virtual Earth Map Control on webpage</title> ? <link type="text/css" rel="stylesheet" href="default.css" /> ? <link type="text/css" rel="stylesheet" href="http://dev.virtualearth.net/standard/v2/MapControl.css" /> </head> <body> ? <form id="form1" runat="server"> ??? <atlas:ScriptManager runat="server" ID="scriptManager"> ????? <Scripts> ??????? <atlas:ScriptReference ScriptName="AtlasUIMap" /> ????? </Scripts> ??? </atlas:ScriptManager> ??? <div id="map1" style="width: 800px; height: 600px; overflow: hidden"> ??? </div> ? </form> ? ? <script type="text/xml-script"> ??? <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> ????? <components> ????????? <virtualEarthMap id="map1" latitude="42.641025" longitude="-96.240234" zoomLevel="4" mapStyle="Hybrid"> ????????? </virtualEarthMap> ????? </components> ??? </page> ? </script> ? </body> </html> ? Step 10) Viewing it in the browser should look like this (Map0.aspx): ?
? ? Step 11) Next we will add a single pushpin to the map. First add the following to default.css
?
??? .item ??? { ??????? position:relative; ??????? background-color: lightyellow; ??????? border: 1px solid #aaa; ??????? padding: 2px 2px 2px 10px; ??????? width: 275px; ??? }
?
??? .itemContainer ??? { ??????? width: 250px; ??????? position:relative; ??????? z-index: 501; ??? }
?
??? .logo ??? { ??????? width: 100px; ??????? height: 64px; ??????? float: left; ??????? margin: 5px 5px 0px 0px; ??? }
?
Step 12) In the xml-script section of the .aspx add an application element with a load attribute that points to the javascript function that will execute when the page first starts. ? ? <script type="text/xml-script"> ????? <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> ??????? <components> ? ??????????? . . .??? ????????? <application load="onLoad"> ????????? </application>????????? ????????? ??????????? . . . ? ??????? </components> ????? </page> ? </script> ? Step 13) Add the following javascript code to the .aspx page. The code defines an array for pushpins. In this instance we add just one. You can add additional pushpins. There are fields for Id,Latitude,Longitude,Name,ImageUrl,MoreInfoUrl and Description. The set_data method on the virtual earth map databinds to the pushpins. ? ??? <script type="text/javascript"> ????? function onLoad() { ????????? var pushpins = [ ??????????? {Id:0,Latitude:46.851734,Longitude:-121.759874,Name:"
????????? ]; ????????? document.getElementById("map1").control.set_data(pushpins); ????? } ??? </script> ? Step 14) Add a template for the popup for the map pushpin to the .aspx page ? ??? <div style="display: none;"> ????? <div id="map1_popupTemplate"> ??????? <div class="item"> ????????? <a href="" id="map1_popupTemplate_imagemoreinfolink" target="_blank"> ??????????? <img id="map1_popupTemplate_logo" alt="" src="" /> ????????? </a> ????????? <span id="map1_popupTemplate_name"></span> ????????? <br /> ????????? <span id="map1_popupTemplate_description"></span> ??????? </div> ???? ?</div> ??? </div> ? Step 15) Update the virtualEarthMap control in the xml-script to include the popupTemplate element definition and additional attributes on the virtualEarthMap to enable data binding. ? ? <script type="text/xml-script"> ????? <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> ??????? <components> ????????? <virtualEarthMap id="map1" latitude="42.641025" longitude="-96.240234" zoomLevel="4" mapStyle="Hybrid" popupPositioningMode="BottomLeft" pushpinActivation="Hover" pushpinImageURL="Images/pushpin.png" pushpinImageWidth="0" pushpinImageHeight="0" popupCssClass="itemContainer" dataLatitudeField="Latitude" dataLongitudeField="Longitude" dataImageURLFormatString="{0}" dataTextFormatString="{0}" dataValueField="Id"> ??????????? <popupTemplate> ????????????? <template layoutElement="map1_popupTemplate"> ??????????????? <hyperLink id="map1_popupTemplate_imagemoreinfolink"> ????????????????? <bindings> ??????????????????? <binding dataPath="MoreInfoUrl" property="navigateURL" /> ?? ???????????????</bindings> ??????????????? </hyperLink> ??????????????? <image cssClass="logo" id="map1_popupTemplate_logo"> ????????????????? <bindings> ??????????????????? <binding dataPath="Name" property="alternateText" /> ??????????????????? <binding dataPath="ImageUrl" property="imageURL" /> ????????????????? </bindings> ??????????????? </image> ??????????????? <label cssClass="itemNameLabel" id="map1_popupTemplate_name"> ????????????????? <bindings> ??????????????????? <binding dataPath="Name" property="text" /> ????????????????? </bindings> ??????????????? </label> ??????????????? <label id="map1_popupTemplate_description"> ????????????????? <bindings> ??????????????????? <binding dataPath="Description" property="text" /> ????????????????? </bindings> ??????????????? </label> ????????????? </template> ??????????? </popupTemplate> ????????? </virtualEarthMap> ??? ????????? <application load="onLoad"> ????????? </application>????????? ????????? ??????? </components> ????? </page> ? </script> ? Step 16) View the .aspx page in the browser and it should look like the following (Map1.aspx): ?
? Step 15) Hover over the pushpin and the popup with show. Click on the image in the popup to navigate to NPS page. ?
? ? Step 17) Add a new C# class to the App_Code directory called MapItemRow.cs with the following code which describes a class with properties for our pushpin.
?
using System; using System.ComponentModel;
?
public class MapItemRow { ??? private int _id; ??? private string _category; ??? private string _name; ??? private string _imageUrl; ??? private string _description; ??? private double _latitude; ??? private double _longitude; ??? private string _moreInfoUrl;
?
??? [DataObjectField(true)] ??? public int Id ??? { ??????? get { return _id; } ??????? set { _id = value; } ??? }
?
??? [DataObjectField(false),DefaultValue("")] ??? public string Name ??? { ??????? get { return _name; } ??????? set { _name = value; } ??? }
?
??? [DataObjectField(false),DefaultValue(0)] ??? public double Latitude ??? { ??????? get { return _latitude; } ??????? set { _latitude = value; } ??? }
?
??? [DataObjectField(false),DefaultValue(0)] ??? public double Longitude ??? { ??????? get { return _longitude; } ??????? set { _longitude = value; } ??? }
?
??? [DataObjectField(false),DefaultValue("")] ??? public string Category { ??????? get { return _category; } ??????? set { _category = value; } ??? }
?
??? [DataObjectField(false),DefaultValue("")] ??? public string ImageUrl ??? { ??????? get { return _imageUrl; } ??????? set { _imageUrl = value; } ??? }
?
??? [DataObjectField(false),DefaultValue("")] ??? public string MoreInfoUrl ??? { ??????? get { return _moreInfoUrl; } ??????? set { _moreInfoUrl = value; } ??? }
?
??? [DataObjectField(false),DefaultValue("")] ??? public string Description ??? { ??????? get { return _description; } ??????? set { _description = value; } ??? }
?
??? public MapItemRow() { }
?
??? public MapItemRow(int id,string name,double latitude,double longitude,string category,string imageUrl,string moreInfoUrl,string description) ??? { ??????? _id = id; ??????? _name = name; ??????? _latitude = latitude; ??????? _longitude = longitude; ??????? _category = category; ??????? _imageUrl = imageUrl; ??????? _moreInfoUrl = moreInfoUrl; ??????? _description = description; ??? } }
?
Step 18) Add a web service called MapItemService.asmx with the following code that defines the CompletionList web method for the auto complete textbox in the full application and the GetData webmethod which returns an array MapItem’s filtered by the Category specified by the searchText parameter.
?
<%@ WebService Language="C#" Class="MapItemService" %>
?
using System; using System.Collections; using System.Collections.Generic; using System.ComponentModel; using System.IO; using System.Web; using System.Web.Caching; using System.Web.Services; using System.Web.Services.Protocols;
?
[WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class MapItemService : System.Web.Services.WebService { ? [WebMethod] ? public string[] GetCompletionList(string prefixText,int count) ? { ??? string[] categories = { "
?
??? prefixText = prefixText.ToLower();
?
??? List<string> suggestions = new List<string>(); ??? foreach (string category in categories) ??? { ????? if (category.ToLower().StartsWith(prefixText)) ??????? suggestions.Add(category); ??? }
?
??? return suggestions.ToArray(); ? } ? ? [WebMethod] ? public MapItemRow[] GetData(String searchText) ? { ??? List<MapItemRow> data = this.GetAllActivities(); ??? ??? if (String.IsNullOrEmpty(searchText)) ????? return data.ToArray();
?
??? string[] words = searchText.Split(' '); ??? return data.FindAll(new Predicate<MapItemRow>(delegate(MapItemRow activity) ??? { ????? foreach (string word in words) ????? { ??????? if (activity.Name.ToLower().IndexOf(word.ToLower()) > -1 || activity.Category.ToLower().IndexOf(word.ToLower()) > -1) ??????? { ????????? return true; ??????? } ????? } ????? return false; ??? })).ToArray(); ? }
?
? private List<MapItemRow> GetAllActivities() { ??? ??????? List<MapItemRow> _data = new List<MapItemRow>(); ??????? int uniqueIDMarker = 1; ??? ??????? _data.Add(new MapItemRow( ??????????? uniqueIDMarker++, ??????????? "
??????????? 46.851734, ??????????? -121.759874, ??????????? "
??????????? "http://www.nps.gov/applications/parkphotos/MORAFromLongmireJune2002-4.jpg", ??????????? "http://nps.gov/mora", ??????????? "<p>Established in 1899. 235,an active volcano encased in over 35 square miles of snow and ice. The park contains outstanding examples of old growth forests and subalpine meadows.</p>" ???????? ));
?
?????? ?_data.Add(new MapItemRow( ??????????? uniqueIDMarker++, ??????????? "Olympic National Park", ??????????? 47.875057, ??????????? -123.925955, ??????????? "http://data2.itc.nps.gov/parkphotos/lodge2.jpg", ??????????? "http://www.nps.gov/olym/", ??????????? "<p>Glacier capped mountains,wild Pacific coast and magnificent stands of old-growth forests,including temperate rain forests -- at Olympic National Park,you can find all three. About 95% of the park is designated wilderness,which further protects these diverse and spectacular ecosystems.</p>" ???????? ));
?
??????? _data.Add(new MapItemRow( ??????????? uniqueIDMarker++, ??????????? "
??????????? 42.928357, ??????????? -122.134123, ??????????? "
??????????? "http://data2.itc.nps.gov/parkphotos/1-1-128A.JPG", ??????????? "http://www.nps.gov/crla/", ??????????? "<p>
???????? ));
?
??????? _data.Add(new MapItemRow( ??????????? uniqueIDMarker++, ??????????? "
??????????? 33.896770, ??????????? -115.862357, ??????????? "
??????????? "http://data2.itc.nps.gov/parkphotos/wash.jpg", ??????????? "http://www.nps.gov/jotr/", ??????????? "<p>For a first-time visitor the desert may appear bleak and drab. Viewed from the road,the desert only hints at its vitality. Closer examination reveals a fascinating variety of plants and animals. A rich cultural history and surreal geologic features add to the attraction of this place.</p>" ???????? ));
?
?????? return _data; ??? } }
?
Step 19) Add a ServiceReference to the script manager for the MapItemService
?
??? <atlas:ScriptManager runat="server" ID="scriptManager"> ????? <Services> ??????? <atlas:ServiceReference Path="MapItemService.asmx" /> ????? </Services> ????? <Scripts> ???? ???<atlas:ScriptReference ScriptName="AtlasUIMap" /> ????? </Scripts> ??? </atlas:ScriptManager>
?
Step 20) Change the onLoad javascript to call the MapItemService GetData method passing in a State (in this case
?
??? <script language="javascript" type="text/javascript"> ????????? function onLoad() { ????????????? MapItemService.GetData("
????????? } ???? ????? ????????? function onComplete(results) { ????????????? document.getElementById("map1").control.set_data(results); ????????? } ??? </script>
?
?
Step 21) View the page in the browser and you should see multiple pushpins on the map.
?
?
This walkthrough has shown how to display a basic Atlas Virtual Earth map with pushpins obtained from a web service. ? enjoy Jonathan （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
- Oozie shell动作内存限制
- docker – 如何在安装卷时排除某些路径？
- angularjs – Angular ui-select.单独添加选项 – 重复选项
- webservice报错javax.xml.ws.soap.SOAPFaultException: jav
- twitter-bootstrap – Twitter Bootstrap：在单页面应用程序
- Angular 应用中的状态管理
- BootStrap3栅格系统与布局
- 具有多个标记的AngularJS谷歌地图
- csh中“setenv”的范围与bash中的“export”
- 配置 – 如何在vim中覆盖?/ .vim和?/ .vimrc路径(但没有其他