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 California. Notice the autocomplete. If we choose California and click the Search button the listview will be populated, see the next screenshot below.
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:"Mount Rainier National Park",ImageUrl:"http://www.nps.gov/applications/parkphotos/MORAFromLongmireJune2002-4.jpg",MoreInfoUrl:"http://nps.gov/mora", Description:"<p>Established in 1899. 235,625 acres (97% is designated Wilderness). Includes Mount Rainier (14,410'), 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>" }
];
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 = { "California", "Oregon", "Washington" };
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++,
"Mount Rainier National Park",
46.851734,
-121.759874,
"Washington",
"http://www.nps.gov/applications/parkphotos/MORAFromLongmireJune2002-4.jpg",
"http://nps.gov/mora",
"<p>Established in 1899. 235,625 acres (97% is designated Wilderness). Includes Mount Rainier (14,410'), 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,
"Washington",
"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++,
"Crater Lake National Park",
42.928357,
-122.134123,
"Oregon",
"http://data2.itc.nps.gov/parkphotos/1-1-128A.JPG",
"http://www.nps.gov/crla/",
"<p>Crater Lake is widely known for its intense blue color and spectacular views. During summer, visitors may navigate the Rim Drive around the lake, enjoy boat tours on the lake surface, stay in the historic Crater Lake Lodge, camp at Mazama Village, or hike some of the park's various trails including Mt. Scott at 8,929 ft. Diverse interpretive programs enhance visitors' knowledge and appreciation of this national park, 90% of which is managed as wilderness. The winter brings some of the heaviest snowfall in the country, averaging 533 inches per year. Although park facilities mostly close for this snowy season, visitors may view the lake during fair weather, enjoy cross-country skiing, and participate in weekend snowshoe hikes.</p>"
));
_data.Add(new MapItemRow(
uniqueIDMarker++,
"Joshua Tree National Park",
33.896770,
-115.862357,
"California",
"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 Washington) and a completion function. Add the OnComplete function which data bind the results of the web service call to the map.
<script language="javascript" type="text/javascript">
function onLoad() {
MapItemService.GetData("Washington", onComplete);
}
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
