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;
usi