How I Built the Where Was Dr. Neil Page

This article is written for an old version of the Virtual Earth platform. While still available for reference purposes, it is unlikely to work if implemented.

The simple web page Where Was Dr. Neil demonstrates using Virtual Earth to display a set of location data that is associated with dates. The final result can be seen at http://www.viavirtualearth.com/MyVirtualEarth/WhereWasDrNeil.aspx.

The data source is a simple XML file containing a set of locations. The file is located at http://www.viavirtualearth.com/MyVirtualEarth/WhereDates.xml.

<Where>
	<Date>Jan 1 2005</Date>
	<Lat>-33.75415</Lat>
	<Lon>151.30216</Lon>
	<Name>Sydney</Name>
</Where>

Each Where location contains the date I arrived at that location, the latitude and longitude of the location and a name for that location.

I started by putting the HTML and client side script together. I combined a client side map control and HTML controls with server side ASP.NET controls.

<%@ Page language="c#" Codebehind="WhereWasDrNeil.aspx.cs" AutoEventWireup="false" Inherits="MyVirtualEarth.WhereWasDrNeil" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
  <head>
    <title>WhereWasDrNeil</title>
    <script src="/ViaVirtualEarth/Portals/0/MapControl.js"></script>
    <script>
    var map = null;
    
    function OnPageLoad()
    {
      map = new VE_MapControl(0.0, 0.0, 2,
      'r', "absolute", 300, 10, 700, 800);
      document.body.appendChild(map.element);
      
      UpdateMap();
    }
    
    function UpdateMap()
    {
      var lat = document.getElementById("LatLabel");
      var lon = document.getElementById("LonLabel");
      map.SetCenterAndZoom(lat.innerText, lon.innerText, 14);
    }
    </script>
  </head>
  <body onLoad="OnPageLoad()" MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server">
    <asp:Calendar id="whereCalendar" style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 264px" runat="server" Height="184px" Width="104px"></asp:Calendar>
    <asp:Label id="LonLabel" style="Z-INDEX: 107; LEFT: 40px; POSITION: absolute; TOP: 616px" runat="server" Width="208px">
      0.0
    </asp:Label>
    <asp:Label id="LatLabel" style="Z-INDEX: 106; LEFT: 40px; POSITION: absolute; TOP: 584px" runat="server" Width="208px">
      0.0
    </asp:Label>
    <asp:Label id="Label1" style="Z-INDEX: 102; LEFT: 24px; POSITION: absolute; TOP: 208px" runat="server" Width="232px">
      Select a date to find out where Dr. Neil was that day.
    </asp:Label>
    <asp:Image id="Image1" style="Z-INDEX: 103; LEFT: 24px; POSITION: absolute; TOP: 16px" runat="server" Height="186px" Width="227px" ImageUrl="images/whereis.jpg"></asp:Image>
    <asp:Label id="selectedDateLabel" style="Z-INDEX: 104; LEFT: 32px; POSITION: absolute; TOP: 504px" runat="server" Width="216px">
      No date selected
      </asp:Label>
      <asp:Label id="LocationLabel" style="Z-INDEX: 105; LEFT: 32px; POSITION: absolute; TOP: 544px" runat="server" Width="208px">
        Where?
      </asp:Label>
      <input type="button" value="Show On Map" style="Z-INDEX: 108; LEFT: 32px; WIDTH: 208px; POSITION: absolute; TOP: 656px; HEIGHT: 28px" onclick="UpdateMap()">
    </form>
  </body>
</html>

I have represented the location information in C# with a class:

private class Where
{
public Where()
{
  date = DateTime.MinValue;
  lat = string.Empty;
  lon = string.Empty;
  name = string.Empty;
}

  public DateTime date;
  public string lat;
  public string lon;
  public string name;
}

Then given an XmlNode I can extract an instance of the Where class in code like this.

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;
    }
  }
  
  return where;
}

I then use this method to find my location on a selected date from an xml file in the following method.

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

This GetWhereAtDateFromFile method can then be called to populate the labels on the Web Form with the location name, the latitude and longitude fields.


private void GetWhere(DateTime date)
{
	string filePath = this.Request.PhysicalApplicationPath + "WhereDates.xml";
	
	Where whereAtDate = GetWhereAtDateFromFile(date, filePath);

	LocationLabel.Text = whereAtDate.name;
	LatLabel.Text = whereAtDate.lat;
	LonLabel.Text = whereAtDate.lon;
}

Finally I call this GetWhere method from the Calendar control�s SelectionChanged event handler.

private void whereCalendar_SelectionChanged(object sender, System.EventArgs e)
{
	DateTime date = whereCalendar.SelectedDate;
	
	if (date < DateTime.Now)
	{
		selectedDateLabel.Text = date.ToShortDateString();
		GetWhere(date);
	}
	else
	{
		selectedDateLabel.Text = "Select a date before today!";
		LatLabel.Text = "0.0";
		LonLabel.Text = "0.0";
	}
}