As I’m often switching location between my home in the UK and working out in Redmond, I’ve been thinking for a while about how best to easily let people know where I am. As you can hopefully see, I’ve added a map to every page on this blog and I thought that maybe people might be interested how I did this, as I learnt a few things on the way that were reasonably interesting.

The first challenge was to figure out the best way around the limitations of adding a map to the blog page. Although the Community Server software that this site runs on is pretty flexible, you can only add elements to every page in various sections – in my case in the News section. Luckily there don’t appear to be any restrictions on the actual HTML you can add, so I was left with a choice of options.

My first thought was to add an <IFRAME… /> section that would call out to a page on my own server that would use Windows Live Maps to display where I am by adding a pushpin at the appropriate location. However this didn’t really work very well, as the map code didn’t really like being in an IFrame and the flow of the page around the map was broken.

Therefore the solution I hit on was to add the following code:

<h3>LIVE LOCATION</h3>
<div id='myMap' style="position:relative; width:150px; height:200px;"></div>
<script type="text/javascript" src=http://www.metanetsolutions.co.uk/mapscript.aspx?mapElement=myMap defer=”true”></script>

The ‘myMap’ element is the div where the map will be placed by the JavaScript that I create on my server. Note that I am passing the name of this element into my script so I can use it.

Interesting point to note is adding the defer=true on to the script call. Without it, I was occasionally hitting a known issue in Internet Explorer due to a bug in the IE parser :-(

The ASPX page that generates the JavaScript is shown below. I won’t show the pretty simple code behind just yet, as I’m hoping to add more functionality to this soon before I share the code. However in this initial version it just creates a “LocationEntry” object from an XML file held on the server, and then uses this object to set various parts of the script.

The interesting things of note in the JavaScript are:

  • Note the excellent "delayed loading of the map code" that was written by Soul Solutions that I used here. This:
    • Sets an animated GIF as the background to the map div while the code is loading
    • Dynamically adds the Virtual Earth required JavaScript files to the head element of the page
    • Sets a callback to the function to setup the map once the VE API scripts have loaded
  • The onscriptload callback function removes the dashboard and scalebar to make the map cleaner, sets the zoom level – defaults to 10 but can be overwritten by setting a zoom=n on the query parameters to the page request, and then simply adds a pushpin at the location set by the LocationEntry in the code behind

Hopefully this is pretty self-explanatory – see http://dev.live.com/virtualearth/ for more details about the Virtual Earth API.

 

Here’s the ASPX/JavaScript code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MapScript.aspx.cs" Inherits="DefaultPage" %>
var mapElementName = '<%= this.MapElementName %>';
var mapControlVersion = '6.2';

// Dynamic loading script from http://www.soulsolutions.com.au/examples/VE62/loadondemand.htm
var loaded = false;
var map = null;

function onscriptload()
{
  // Get rid of our load animation
  document.getElementById(mapElementName).style.background = "";

  var locationLatLong = new VELatLong(<%= this.CurrentLocation.Latitude %>, <%= this.CurrentLocation.Longitude %>);

  map = new VEMap(mapElementName);
  map.LoadMap(locationLatLong, 1, VEMapStyle.Road, true, VEMapMode.Mode2D, false, 0);
  map.HideDashboard();
  map.HideScalebar();
  map.SetZoomLevel(<%= this.MapZoomLevel %>);

  AddLocationPushpin(locationLatLong);
}

function loadVEAPI()
{
  if (!loaded)
  {
    loaded = true;
  
    // Set a nice animated gif to show the map is loading
    document.getElementById(mapElementName).style.background = "url(images/ajax-loader.gif) center center no-repeat";
    
    if (!(window.attachEvent))
    {
      appendJS("http://dev.virtualearth.net/mapcontrol/v" + mapControlVersion + "/js/atlascompat.js");
    }
  
    appendJS("http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=" + mapControlVersion + "&onScriptLoad=onscriptload");
  }
}

function appendJS(filename)
{
  var fileref = document.createElement('script');
  fileref.setAttribute("type", "text/javascript");
  fileref.setAttribute("src", filename);
  document.getElementsByTagName("head")[0].appendChild(fileref);
}

function AddLocationPushpin(myLocation)
{
  map.SetCenter(myLocation);

  var myPushpin = new VEShape(VEShapeType.Pushpin, myLocation);

  myPushpin.SetTitle("<%= this.CurrentLocation.Title %>");

  var description = "<p><%= this.CurrentLocation.Description %></p>";
  description += "<p><%= this.CurrentLocation.UpdateTime.ToString("u") %></p>";
  myPushpin.SetDescription(description);

  map.AddShape(myPushpin);
}

// Start the loading
loadVEAPI();

 

Future plans (which I suspect are overly ambitious!) for this application involve:

  • A JavaScript and VE enabled form to easily update my location
  • Mesh-enabling the application
  • Hooking up my GPS so I can automatically update my location when I’m on the move
  • Possibly hooking everything up to FireEagle