This article is written for an old version of the Virtual Earth platform.
Over the last 8 months my Where Was Dr. Neil page has proved to be very popular, I use a link to it as an email footer and my friends and family can always find out where I have been. When I last worked on the page I upgraded it to use the version 1 Virtual Earth commercial control, and it looked like this:
Recently a few things happened that made me want to upgrade my “Where Was Dr. Neil” web page.
Figure 1
Firstly the team over at http://remerged.com wrote an article on how to redesign a Web 2.0 web page and they used my page as an example, you can find the article at http://www.remerged.com/remerged/index.php?option=com_content&task=view&id=33&Itemid=36.
Then Microsoft released a new beta version of their map control. This new version 3 of the beta has a number of compelling features and requires a lot less code to enable it to run. I always like the idea of having less code of my own to maintain. Thirdly Microsoft has made it clear they are not going to continue support for the version 1 commercial control in the coming months. If the other reasons didn’t convince me to do something about my page, this third one certainly does. The latest version of the Where was Dr. Neil web page can be found at http://Roodyn.com/Where.aspx.
The Graphics
I am a software guy; I have never had much time or talent for messing around with image files. This is very evident from my original “Where Was” web page. So I contacted Jason Crosse from the Remerged team and asked if he could help supply the image files I would need to build a new version of the page as discussed in the remerged article.
A few days later Jason sent me a zip file with 11 images files and a text file containing the RGB values for the colors used in the design. This was incredibly helpful. I can't imagine trying to build a commercial grade web page without support from professional designers.
I started laying out the images on my existing page and changing the control and colors to match the design. At this stage I thought the upgrade was going to be easy.
The Map Technology
I have been close to the Virtual Earth map control and other supporting controls as they have evolved over the life time of Virtual Earth. With each revision of the technology I have written a couple of articles explaining how to get started using the map control and build a web page with a Virtual Earth map.
I started to convert the JScript code in my “Where was” page to use the new control. After an hour I was getting frustrated. The page was very broken and I didn’t feel like I was making much progress in fixing it.
The way I develop is in very small steps. I like to have working code all the way along. For me having something broken for an hour was a strong indication something was very wrong with the approach I was taking.
I took a break.
A cup of tea later I reviewed my position and decided it would be more sensible to start the page again. Of course I would still have all the code for my old page in source control as a reference point.
If you are upgrading to the new version 3 beta control from version 1 or 2 I would strongly recommend thinking about taking this approach.
The version 3 control removes the need to host proxy code on your server for search or birds eye and the amount of code required to carry out many of the map functions is greatly reduced. By starting again you can ensure you do not have any old code lying around that is not being called.
Once I had made this decision the process to complete the page was very straight forward.
I started by creating a div element on the page to hold the map.
<div id="myMap"
style="Z-INDEX: 102; LEFT: 276px; WIDTH: 656px; POSITION: absolute; TOP: 16px; HEIGHT: 700px">
</div>
I then added an ASP table control that I could access from both my server side ASP code and my client side Jscript
<asp:Table id="placeTable" style="Z-INDEX: 1; LEFT: 100px; POSITION: absolute; TOP: 80px" runat="server"></asp:Table>I then defined styles to use the images supplied for the control on the map dashboard.
.Compass
{
BACKGROUND: url(images/wherewas/compass.gif);
MARGIN: 0px; WIDTH: 54px;
CURSOR: pointer; HEIGHT: 54px
}
.ZoomBar
{
BACKGROUND: url(images/wherewas/bar.gif);
MARGIN: 2px; OVERFLOW: hidden; WIDTH: 103px;
POSITION: relative; HEIGHT: 20px
}
.ZoomBar_slider
{
DISPLAY: block;
BACKGROUND: url(images/wherewas/slider.gif);
OVERFLOW: hidden; WIDTH: 7px;
POSITION: absolute; HEIGHT: 20px
}Then I created my OnPageLoad Jscript method that gets called from the body onload event
function OnPageLoad()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(-33.7939, 151.1093),
10 ,'r' , false);
}
...
...This gave me a page with the nice control images shown in the dashboard on the map.
There were some extra things I wanted to do with the dashboard that are not supported by the Virtual Earth map control. I wanted to change the color of the header and text, I wanted to reposition the dashboard to the top right of the map (instead of the top left) and I wanted to add a footer as per the design in the remerged article.
Starting with the header on the dashboard, this is defined in CSS for the map so I can override the style with my own style declared locally on my page.
.Dashboard_selected
{ FONT-WEIGHT: bold; COLOR: white }
.Dashboard_unselected
{ FONT-WEIGHT: normal; COLOR: white }
.Dashboard .header
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
Z-INDEX: 100;
LEFT: 0px;
PADDING-BOTTOM: 4px;
WIDTH: 100%;
PADDING-TOP: 3px;
BORDER-BOTTOM: #cbcbcb 1px solid;
POSITION: relative;
TOP: 0px;
BACKGROUND-COLOR: #1b679b
}To move the dashboard I needed to get access to the dashboard control created by the map control. This is not a supported feature so it might change in future versions of the control.
var dash = map.vemapcontrol.GetDashboard();
dash.SetX(400);Finally to add a footer I had to define a new footer style and append it to the dashboard. Remember this is all HTML, the dashboard is simply a div element containing other elements. To create the footer I create a new div element and append it to the main element of the dashboard.
var dashtbody = dash.GetElement("tbody");
var dashfooter=document.createElement("div");
dashfooter.className="footer";
dashtbody.appendChild(dashfooter);Now I had a map which looked good and close to the design suggested by the article. The last thing to do was to place a pushpin on the map at the correct location. The location will be obtained in the server side code and placed in the placeTable element I defined earlier. I built a method (based heavily on code in the previous version) that retrieves the information on the location and places the pushpin on the map.
function UpdateMap()
{
var placeTable = document.getElementById("placeTable");
var lat = placeTable.rows[0].cells[0].innerHTML;
var lon = placeTable.rows[0].cells[1].innerHTML;
var date = placeTable.rows[0].cells[2].innerHTML;
var name = placeTable.rows[0].cells[3].innerHTML;
var imgUrl = "images/whereis.jpg";
try
{
imgUrl = placeTable.rows[0].cells[4].innerHTML;
}
catch(EX)
{
imgUrl = "images/whereis.jpg";
}
map.SetCenterAndZoom(new VELatLong(lat, lon), 10);
map.DeleteAllPushpins();
var pin = new VEPushpin(1,
new VELatLong(lat, lon),
'images/WhereWas/pushpin_face.png',
name,
'Dr. Neil was seen here on ' + date
);
map.AddPushpin(pin);
}The last step is to call this UpdateMap method from the end of the OnPageLoad method.
function OnPageLoad()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(-33.7939, 151.1093),
10 ,'r' , false);
var dash = map.vemapcontrol.GetDashboard();
dash.SetX(400);
var dashtbody = dash.GetElement("tbody");
var dashfooter=document.createElement("div");
dashfooter.className="footer";
dashtbody.appendChild(dashfooter);
UpdateMap();
}The Core Functionality
Moving to the server side code I realized that most of the core functionality of loading the places from the XML file would remain the same as in the original page (http://www.viawindowslive.com/Articles/VirtualEarth/HowIBuilttheWhereWasDrNeilPage.aspx).
I started by copying the Where class used in the original code.
private class Where
{
public Where()
{
date = DateTime.MinValue;
lat = string.Empty;
lon = string.Empty;
name = string.Empty;
img = string.Empty;
}
public DateTime date;
public string lat;
public string lon;
public string name;
public string img;
}I then copied the original code that extracted the location information from the XML node and created an instance of the Where class.
private Where ExtractInfo(XmlNode whereNode)
{
Where where = new Where();
foreach(XmlNode info in whereNode.ChildNodes)
{
switch(info.Name)
{
case "Date":
where.date = DateTime.Parse(info.InnerXml);
break;
case "Name":
where.name = info.InnerXml;
break;
case "Lat":
where.lat = info.InnerXml;
break;
case "Lon":
where.lon = info.InnerXml;
break;
case "Img":
where.img = info.InnerXml;
break;
}
}
return where;
}Then I copied the GetWhereAtDateFromFile method that gets the correct Where class instance for a specific date.
private Where GetWhereAtDateFromFile(
DateTime date, string filePath)
{
Where whereAtDate = new Where();
XmlDocument whereDates = new XmlDocument();
whereDates.Load(filePath);
XmlNodeList whereNodes =
whereDates.DocumentElement.ChildNodes;
foreach(XmlNode whereNode in whereNodes)
{
Where where = ExtractInfo(whereNode);
if (where.date > date)
{
break;
}
whereAtDate = where;
}
return whereAtDate;
}Then I copied the GetWhere method from the original code, this needed changing. In the first version I wrote the information was not stored in a table. Instead it was placed in label controls. This code needed upgrading, the first server side code that needed to change.
private void GetWhere(DateTime date)
{
string filePath =
this.Request.PhysicalApplicationPath + "WhereDates.xml";
Where whereAtDate = GetWhereAtDateFromFile(date, filePath);
//build table with where data
placeTable.Rows.Clear();
TableRow placeRow = new TableRow();
TableCell cell = new TableCell();
cell = new TableCell();
cell.Text = whereAtDate.lat.ToString();
placeRow.Cells.Add(cell);
cell = new TableCell();
cell.Text = whereAtDate.lon.ToString();
placeRow.Cells.Add(cell);
cell = new TableCell();
cell.Text = whereAtDate.date.ToLongDateString();
placeRow.Cells.Add(cell);
cell = new TableCell();
cell.Text = whereAtDate.name;
placeRow.Cells.Add(cell);
if (whereAtDate.img != string.Empty)
{
cell = new TableCell();
cell.Text = whereAtDate.img.ToString();
placeRow.Cells.Add(cell);
locationImage.ImageUrl = whereAtDate.img.ToString();
}
placeTable.Rows.Add(placeRow);
locationLabel.Text = whereAtDate.name;
}In the Page_Load method I need to call the GetWhere method to initialize the placeTable data
private void Page_Load(object sender, System.EventArgs e)
{
whereCalendar.SelectedDate = DateTime.Now;
GetWhere(whereCalendar.SelectedDate);
}Finally the placeTable needs to be updated when the date selection of the calendar control changes.
private void whereCalendar_SelectionChanged(object sender,
System.EventArgs e)
{
DateTime date = whereCalendar.SelectedDate;
if (date < DateTime.Now)
{
GetWhere(date);
locationLabel.Font.Bold = false;
}
else
{
locationLabel.Text = "Select a date before today!";
locationLabel.Font.Bold = true;
}
}Conclusion
Going through this process of updating my “Where Was Dr. Neil” page has been a useful lesson. If you are using an earlier version of the map controls I would recommend you upgrade to the new version. I would also recommend you think about how you can keep as much of the core functionality in tact and yet start again with a clean page.
You will find a great deal of the JScript for controlling the map will have changed. The constructors for most of the map controls have changed, the way pushpins are used has changed, the new dashboard control presents some new opportunities and many of the events and methods have changed.
I used the original JScript code to guide the development of the new code but ended up finding it much easier to start the development of the page from scratch. I copied the code that I could from the original page but most of the Jscript was built from scratch.
You will hopefully find the examples in the Getting Started with V3 of the API article helpful. (http://www.viawindowslive.com/Articles/VirtualEarth/GettingStartedwithV3oftheAPIPart1.aspx)
Full listing for the WhereWasDrNeil.ASPX page
<%@ Page language="c#" Codebehind="WhereWasDrNeil.aspx.cs" AutoEventWireup="false" Inherits="MyVirtualEarth.WhereWasDrNeil1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Where Was Dr. Neil</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<META http-equiv="imagetoolbar" content="no">
<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
<STYLE type="text/css" media="screen">
.Compass
{
BACKGROUND: url(images/wherewas/compass.gif);
MARGIN: 0px; WIDTH: 54px;
CURSOR: pointer; HEIGHT: 54px
}
.ZoomBar
{
BACKGROUND: url(images/wherewas/bar.gif);
MARGIN: 2px; OVERFLOW: hidden; WIDTH: 103px;
POSITION: relative; HEIGHT: 20px
}
.ZoomBar_slider
{
DISPLAY: block;
BACKGROUND: url(images/wherewas/slider.gif);
OVERFLOW: hidden; WIDTH: 7px;
POSITION: absolute; HEIGHT: 20px
}
.Dashboard
{
BORDER-RIGHT: #000000 1px solid;
PADDING-RIGHT: 0px;
BORDER-TOP: #000000 1px solid;
PADDING-LEFT: 0px;
FONT-WEIGHT: normal;
FONT-SIZE: 7.5pt;
Z-INDEX: 100;
FILTER: alpha(opacity:90);
PADDING-BOTTOM: 0px; OVERFLOW: visible;
BORDER-LEFT: #000000 1px solid; COLOR: black;
PADDING-TOP: 0px;
BORDER-BOTTOM: #000000 1px solid;
FONT-FAMILY: Verdana,sans-serif;
POSITION: absolute;
BACKGROUND-COLOR: white; opacity: .9
}
.Dashboard_selected
{ FONT-WEIGHT: bold; COLOR: white }
.Dashboard_unselected
{ FONT-WEIGHT: normal; COLOR: white }
.Dashboard .header
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
Z-INDEX: 100;
LEFT: 0px;
PADDING-BOTTOM: 4px;
WIDTH: 100%;
PADDING-TOP: 3px;
BORDER-BOTTOM: #cbcbcb 1px solid;
POSITION: relative;
TOP: 0px;
BACKGROUND-COLOR: #1b679b
}
.Dashboard .footer
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 100;
BACKGROUND: url(images/wherewas/controls_logo.png) white norepeat;
FILTER: none; LEFT: 0px; PADDING-BOTTOM: 4px; WIDTH: 100%;
PADDING-TOP: 3px; POSITION: relative;
TOP: 0px; HEIGHT: 51px;
opacity: 1.0
}
</STYLE>
<script>
function OnPageLoad()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(-33.7939, 151.1093),
10 ,'r' , false);
var dash = map.vemapcontrol.GetDashboard();
dash.SetX(600-200);
//
var dashtbody = dash.GetElement("tbody");
var dashfooter=document.createElement("div");
dashfooter.className="footer";
dashtbody.appendChild(dashfooter);
UpdateMap();
}
function UpdateMap()
{
var placeTable = document.getElementById("placeTable");
var lat = placeTable.rows[0].cells[0].innerHTML;
var lon = placeTable.rows[0].cells[1].innerHTML;
var date = placeTable.rows[0].cells[2].innerHTML;
var name = placeTable.rows[0].cells[3].innerHTML;
var imgUrl = "images/whereis.jpg";
try
{
imgUrl = placeTable.rows[0].cells[4].innerHTML;
}
catch(EX)
{
imgUrl = "images/whereis.jpg";
}
map.SetCenterAndZoom(new VELatLong(lat, lon), 10);
map.DeleteAllPushpins();
var pin = new VEPushpin(1,
new VELatLong(lat, lon),
'images/WhereWas/pushpin_face.png',
name,
'Dr. Neil was seen here on ' + date
);
map.AddPushpin(pin);
}
</script>
</HEAD>
<body onload="OnPageLoad();" MS_POSITIONING="GridLayout">
<div id="myMap"
style="Z-INDEX: 102; LEFT: 276px; WIDTH: 656px; POSITION: absolute; TOP: 16px; HEIGHT: 700px">
</div>
<form id="Form1" method="post" runat="server">
<asp:image id="Logo"
style="Z-INDEX: 103; LEFT: 16px; POSITION: absolute; TOP: 16px"
runat="server"
ImageUrl="images/WhereWas/sidebar_logo.png">
</asp:image>
<asp:calendar id="whereCalendar"
style="Z-INDEX: 104; LEFT: 40px; POSITION: absolute; TOP: 136px"
runat="server" PrevMonthText="<<"
NextMonthText=">>"
ForeColor="Black"
FirstDayOfWeek="Monday"
DayNameFormat="FirstTwoLetters"
BorderWidth="1px" BorderStyle="Solid"
BorderColor="Black"
Font-Names="Verdana"
Font-Size="8pt"
Width="200px" Height="144px">
<DayStyle BorderWidth="2px" BorderStyle="Solid"
BorderColor="White">
</DayStyle>
<NextPrevStyle ForeColor="White"></NextPrevStyle>
<DayHeaderStyle BorderWidth="4px"
ForeColor="Black"
BorderStyle="Solid"
BorderColor="White"></DayHeaderStyle>
<SelectedDayStyle ForeColor="White"
BackColor="#1B679B">
</SelectedDayStyle>
<TitleStyle ForeColor="White"
BackColor="#1B679B">
</TitleStyle>
<OtherMonthDayStyle ForeColor="#C00000">
</OtherMonthDayStyle>
</asp:calendar>
<p align="center">
<asp:label id="locationLabel"
style="Z-INDEX: 105; LEFT: 40px; POSITION: absolute; TOP: 344px"
runat="server" ForeColor="White"
BorderWidth="1px"
BorderStyle="Solid"
BorderColor="Black"
Font-Names="Verdana"
Font-Size="8pt"
Width="202px"
BackColor="#1B679B">Place
</asp:label>
</p>
<asp:image id="locationImage"
style="Z-INDEX: 106; LEFT: 40px; POSITION: absolute; TOP: 360px"
runat="server"
BorderWidth="1px"
BorderStyle="Solid"
BorderColor="Black"
Width="200px"
Height="174px">
</asp:image>
<asp:panel id="Panel1"
style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 16px"
runat="server"
Width="920px"
Height="700px"
BackImageUrl="images/WhereWas/back.png">
<A href="http://ViaVirtualEarth.com">
<IMG style="Z-INDEX: 130; LEFT: 24px; WIDTH: 120px; POSITION: absolute; TOP: 632px; HEIGHT: 60px"
height="60" alt=""
src="images\WhereWas\ViaVE.gif"
width="152">
</A>
<A href="http://Remerged.com">
<IMG style="Z-INDEX: 130; LEFT: 8px; POSITION: absolute; TOP: 552px"
alt=""
src="images\WhereWas\remerged_logo.png">
</A>
</asp:panel>
<asp:Table id="placeTable"
style="Z-INDEX: 1; LEFT: 100px; POSITION: absolute; TOP: 80px"
runat="server">
</asp:Table>
</form>
</body>
</HTML>Full listing for the WhereWasDrNeil.ASPX.cs page
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Xml;
namespace MyVirtualEarth
{
/// <summary>
/// Summary description for WhereWasDrNeil1.
/// </summary>
public class WhereWasDrNeil1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Calendar whereCalendar;
protected System.Web.UI.WebControls.Label locationLabel;
protected System.Web.UI.WebControls.Image locationImage;
protected System.Web.UI.WebControls.Panel Panel1;
protected System.Web.UI.WebControls.Table placeTable;
protected System.Web.UI.WebControls.Image Logo;
private class Where
{
public Where()
{
date = DateTime.MinValue;
lat = string.Empty;
lon = string.Empty;
name = string.Empty;
img = string.Empty;
}
public DateTime date;
public string lat;
public string lon;
public string name;
public string img;
}
private void Page_Load(object sender, System.EventArgs e)
{
whereCalendar.SelectedDate = DateTime.Now;
GetWhere(whereCalendar.SelectedDate);
}
private void GetWhere(DateTime date)
{
string filePath =
this.Request.PhysicalApplicationPath + "WhereDates.xml";
Where whereAtDate = GetWhereAtDateFromFile(date, filePath);
//build table with where data
placeTable.Rows.Clear();
TableRow placeRow = new TableRow();
TableCell cell = new TableCell();
cell = new TableCell();
cell.Text = whereAtDate.lat.ToString();
placeRow.Cells.Add(cell);
cell = new TableCell();
cell.Text = whereAtDate.lon.ToString();
placeRow.Cells.Add(cell);
cell = new TableCell();
cell.Text = whereAtDate.date.ToLongDateString();
placeRow.Cells.Add(cell);
cell = new TableCell();
cell.Text = whereAtDate.name;
placeRow.Cells.Add(cell);
if (whereAtDate.img != string.Empty)
{
cell = new TableCell();
cell.Text = whereAtDate.img.ToString();
placeRow.Cells.Add(cell);
locationImage.ImageUrl = whereAtDate.img.ToString();
}
placeTable.Rows.Add(placeRow);
locationLabel.Text = whereAtDate.name;
}
private Where GetWhereAtDateFromFile(
DateTime date, string filePath)
{
Where whereAtDate = new Where();
XmlDocument whereDates = new XmlDocument();
whereDates.Load(filePath);
XmlNodeList whereNodes =
whereDates.DocumentElement.ChildNodes;
foreach(XmlNode whereNode in whereNodes)
{
Where where = ExtractInfo(whereNode);
if (where.date > date)
{
break;
}
whereAtDate = where;
}
return whereAtDate;
}
private Where ExtractInfo(XmlNode whereNode)
{
Where where = new Where();
foreach(XmlNode info in whereNode.ChildNodes)
{
switch(info.Name)
{
case "Date":
where.date = DateTime.Parse(info.InnerXml);
break;
case "Name":
where.name = info.InnerXml;
break;
case "Lat":
where.lat = info.InnerXml;
break;
case "Lon":
where.lon = info.InnerXml;
break;
case "Img":
where.img = info.InnerXml;
break;
}
}
return where;
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.whereCalendar.SelectionChanged +=
new System.EventHandler(this.whereCalendar_SelectionChanged);
this.Load +=
new System.EventHandler(this.Page_Load);
}
#endregion
private void whereCalendar_SelectionChanged(object sender,
System.EventArgs e)
{
DateTime date = whereCalendar.SelectedDate;
if (date < DateTime.Now)
{
GetWhere(date);
locationLabel.Font.Bold = false;
}
else
{
locationLabel.Text = "Select a date before today!";
locationLabel.Font.Bold = true;
}
}
}
}