Transport for London's Journey Planner is now using Google Maps!

Anthony Marshall
Anthony Marshall
24 Jun 2013
blog post featured image

This year Earthware have been working alongside the TfL Online Team and BAE Systems Detica to create the new Transport for London Journey Planner. As of tomorrow you are able to try it out for yourself!

We have been working on this very exciting project since January, creating the mapping framework that has been used on the new site, using Google Maps. Now that the new Journey Planner has been launched, we thought we’d take the opportunity to tell you about all the cool things we have been doing.

The new TfL website comprises of a responsive design layout, and it has been an interesting and educating experience inserting maps into a site that has been designed, right from the start, for mobile usage. There are 3 widths available to users; single column for mobile devices, 2 columns for medium sized screens such as small slate devices, and three columns for desktops.

There are 3 maps for you to take a look at in this release of the site.

The first shows where you are if you try to plan a journey using your current location as the start point – click on the use my location option in the drop down for starting locations:

Then if you’ve allowed your browser to know your location, it will show a map of where it thinks you are:

The second map shows if you try to plan a journey and use a destination that isn't exactly recognised, you are provided with a list of options that are possible matches for you to select from. You can see this in the example below where I was planning to go to “Victaria”.

Note the full screen button in the bottom right of all the maps, allowing you to better explore:clip_image006

Once the site knows the start and end point of your journey, it offers you 4 possible routes and times of travel. For each option you can click on the details of each leg, and view that leg on a Google Map.

You can see the third map when you investigate an individual leg of the journey you have planned (by clicking on Show map). For the leg shown below you are able to take either the Circle or District line from the same platform, so both colours are shown on a single polyline, to make sure there are no gaps. Here I planned a trip from St. James’s Park to Bank. See this route for yourself here.

And if you are a pictures person you can now switch to satellite view too!

As there are many modes of public transport in London, it’s worth taking a look at how these are now displayed on the site’s maps too.

River routes have been mapped clearly, by suppressing Google’s in built river ferry routes. Here I planned a trip from London Bridge Pier to Greenwich Pier. See this route for yourself here.

And of course the cable car route! Here I planned a trip from Emirates Greenwich Peninsula to Emirates Royal Docks. See this route for yourself here.

On the DLR Route below you can see it ‘’dog legging’’ through the isle of dogs. Here I planned a trip from Bank to Greenwich Station. See this route for yourself here.

It has been a fantastic experience working with both BAE Systems Detica and TfL on this exciting project. Take a look at the new TfL website today and let us know what you think of the design, responsive layout, and of course, the maps!

Thanks to the recent introduction of Google Map Maker in the UK, should you see any corrections that are required on the underlying Google Maps, go ahead and make a suggestion!

We’re really looking forward to hearing your thoughts on the new TfL Journey Planner maps. If you’ve got questions on these, or any other maps, please get in touch!

Earthware: +44 (0) 845 642 9880

Or email Giles Collingwood:

Close chatbot
Open chatbot
Open chatbot