Tubewalker Blog: Blog Archives

I’ve just added two new features to my tubewalk website, which you might find interesting.

The first is a full screen button for my route maps. Until now, you’ve only been able to view my route maps in a rather pokey manner, like this:

But not now! Simply click on the ‘Expand map’ link to expand the map to fill your browser window, and click on ‘Shrink map’ to go back again. Here’s an example of the same route in all its full screen glory. 

The second new feature is a bit more interesting; it’s a tubewalk planner. Simply choose two Tube stations you’d like to walk between, and the planner will work out the shortest tubewalk from one to the other, showing you the distance in miles, how many stations you pass through, and a link to a route map. If you only choose one Tube station, then the planner will work out all possible routes starting (or ending) at that station. The planner is in its early stages, but it’s still fun to play with; the route above, which is from Amersham to Epping, is the kind of thing that the tubewalk planner can produce.

Oh, and for the technically minded out there, the planner uses Dijkstra’s algorithm to work out the shortest path between two points in the Tube network. I knew that computing degree would come in handy one day…

One of the more enjoyable parts of my walking life comes when I publish the results on the Web. For me, part of the thrill is knowing that I’ll be able to go back in years to come and remind myself of the good (or bad) times, and being English, I thoroughly enjoy wallowing in nostalgia. But another happy aspect is when people get in touch and say they really like my site… and by the way, just how did you get your route into Google Maps? For those with a technical bent, here’s a quick overview. I’m going to assume you’re reasonably familiar with the way the Google Maps API works; if this means nothing to you, then you clearly have a life, and might want to go off and enjoy it for the rest of this post…

Getting your route online can be a bit of a trauma, especially if you haven’t already done your walk and recorded it on a GPS. With this in mind, I’ve designed my tubewalking routes digitally from the start, and to test the process, I started by producing a geographical map of the Tube.

First up, I needed a decent paper map of the Underground. The iconic Tube map is a start, but it’s only schematic and bears little relationship to the geography of the Tube, so I bought a set of Ordnance Survey Explorer maps, covering London in 1:25,000 detail. These maps show all the Tube stations, and when the Tube lines are above ground they show the lines too, so armed with a general idea of where the Tube lives, I set off to map the Underground in Google Maps.

As if reading my mind, Google added a new feature to Google Maps just as I was starting to think seriously about digitising my tubewalk. This feature, called My Maps, allows you to create routes and points on the Google Maps and save them, all using a standard web browser. So I started by creating a point for each Tube station, and then I simply drew straight lines between the stations, one for each of the 300+ legs of my tubewalk. Then, for each leg, I edited this line to follow the geographical route of the Tube, and I eventually ended up with a geographical map of the Underground, saved in My Maps. Here’s the Metropolitan line between Northwood and Northwood Hills; you can see that it’s pretty obvious when above ground, and is easy enough to trace:

But how to get this onto my website? The answer lies in My Maps’ ability to export your maps to Google Earth. Click on the ‘View in Google Earth’ link and your browser will save a KML file to your computer that you can load into Google Earth to view your map; look inside this KML file and you’ll see a URL pointing to your map on the Google server, and if you replace all the occurrences of & with an unescaped & and then paste the resulting URL into your browser, your browser will save a KML file to your computer containing all the points and routes you’ve painstakingly entered into My Maps.

Including a Google Map in your own site is the subject for a book in its own right – see Mike Williams’ excellent Google Maps API Tutorial for details – but if you’ve got a decent text editor and know how to use search and replace, it’s fairly straightforward to convert your KML file into XML, ready to be sucked into your Google Maps mash-up and displayed on site. That’s how my 2D map of the Underground works, by importing XML files like this one for the Bakerloo line (you might have to View Source in your browser to see the XML) and displaying the results using the Google Maps API.

I used an identical system to digitise my walking route, though this time I used various maps and guidebooks to design the route before entering it into My Maps. Some of the sections weave around to take in the sights and some are more direct, but technologically speaking they’re all routes in My Maps, just like the geographical Tube map. Here’s me editing the route on the Piccadilly line west of Boston Manor:

This system works fine, and it’s how the maps on my Land’s End to John o’Groats site work (though when I digitised these routes, My Maps didn’t exist, so I had to write my own, extremely crude version, which did the job, but only at the cost of my sanity). However, things are a little more involved on my Tubewalker site, because I wanted to write an application that could take an arbitrary sequence of Tube stations and output the walking route between them (because in the not-too-distant future I’m going to be offering a tubewalk planner for those wanting to design their own tubewalks, and this needs to be able to display arbitrary routes easily).

So, instead of static XML files, I’ve put all my route information into a MySQL database and written a PHP application that accepts a list of station numbers (starting at 0 for Acton Town, 1 for Aldgate and so on) and returns the XML for the walking route between those stations. This is in exactly the same format as the static XML above, but it’s dynamically generated.

To take an example, consider the route on the Metropolitan line from Aldgate to Liverpool Street to Moorgate. In my database, these stations have IDs 1, 138 and 150 respectively, so the URL to display the walking route is:

www.tubewalker.com/route/map.php?route=1-138-150

Under the bonnet, map.php takes the route argument and passes it on to another PHP application, map_xml.php, which returns the XML for this route (again, you might have to View Source in your browser to see the XML):

www.tubewalker.com/route/map_xml.php?route=1-138-150

This is passed into the Google Maps API in the same way as the static XML file I used for the geographical Tube map, and works because the XML loader simply takes a URL as an argument, and it doesn’t care whether this points to a static file or dynamically generated XML.

For the final stage I added shortcuts for the line names, so:

www.tubewalker.com/route/map.php?route=metropolitan

shows the Metropolitan line, and there’s also support for a tube parameter that shows the Tube lines instead of the walking route:

www.tubewalker.com/route/map.php?route=metropolitan&tube=1

And that, in a very tight nutshell, is how my maps work. The next step is to enter all the points of interest I hope to visit into My Maps, export these into the database, and add them to the output, along with some toggle switches to hide them. Watch this space…