Launch of Web App to Analysis TfL Open Data

I’m building a desktop web application that I would like to freely share with users of this Tech Forum.

The aim of the app is to help analysis the open data supplied by TfL.

This Initial release will provide some basic analysis of the buses:

  1. buses (777)
  2. bus stops (20,102)
  3. London boroughs (32), extending to outer London boroughs (Brentwood, Dartford, Hertsmere, Watford etc)

Here is the link to the application

London Traveller Desktop Web Application

Screenshot below… comments welcomed!

Cheers.

Screenshot%20-%20LTr%20Desktop%20-%2004

I have added a Map View (with a difference)!

First, Open Data provides the (latitude and longitude) coordinates, for each (most) bus route, for both the outbound and inbound routes. The API request below retrieves details for the Bus Line 316 and the coordinates are provided in the response property lineStrings as an array of coordinates (in a string format - the outbound route in the 1st array and the inbound in the 2nd array). Depending on the length of the route, about 80 - 150 coordinates are provided for the each leg of the route.

https://api.tfl.gov.uk/Line/316/Route/Sequence/all

To view the Map View, select a route listed in the Bus Line Network Analysis and click on the Map button (screenshot provided below).

The Bus Route Map window will be shown. The markers used are:

Start of Bus Route
locator_start_red_green_32x32
Bus Stop along route
marker_stop_16x16
End of Bus Route
locator_finish_red_32x32

To make the view more engaging and interactive, the mapping of the bus route is animated from start to end and each bus stop is created along the route as it is being plotted.

The Bus Stops are listed to the right of the map and the distance between each stop is shown in km and mi.

Furthermore, as your mouse hovers over the list, the corresponding Bus Stop on the map is animated and the segment of the bus route is highlighted.

The screenshot below illustrates the map view with the mouse hovering over the Distance information and the corresponding bus route segment highlighted.

The overall mapping information opens up more opportunities to provide additional analysis which I am aiming to develop over the coming weeks!

Just to share with fellow developers…I am using the fantastic Leaflet open-source JavaScipt library for interactive mapping.
https://leafletjs.com/
.

Should I be able to see the screens as app outputs rather than screenshots? If I click on your link all I get is the strings output by the call.

@mjcarchive

Here is the link to the app:

https://londontraveller.app/desktop/

Please note it will only work from a desktop or laptop…not a mobile.

Cheers.

@LondonTravel

I’ve been looking at the app, and there are a number of good things and a number of less so.

As I’m a developer too, I know that people coming back with loads of bugs and criticism is both necessary, but never wanted! As most of critical things I would say relate to usability, I’m just going to provide you with a single link to https://www.nngroup.com/articles/usability-101-introduction-to-usability/ and leave that there.

I’ll be back shortly with the questions and suggestions I have about the rest.

@briantist

Thanks for the link to the article.
I look forward and welcome your critic.

1 Like

I have added a new desktop icon, Bus Network Visualisation.

Desktop Icon - Bus Network Visualisation
Bus Network Visualisation provides a simulation of the bus transport network, for each route (677 in total), being built on the map.

The final (complex) view is shown in the screenshot below.
Screenshot - Bus Network Visualisation - 01

The building process (for this initial version) can be started with a selected starting bus route. Select your route from the list of Total routes to build (shown in the screenshot below).

Depending on your system, the building process will take 4 - 10 minutes.

After the process has completed, hover over the bus route number in the Total routes completed list and the route will be highlighted on the map (as shown in the screenshot below, the bus route X140 has been highlighted).

Points to Note:

  • The total bus routes plotted excludes Rail Replacement Buses and (of course) only routes where the coordinates are provided.

  • Only the outbound journeys are plotted and subsequently,

  • the total bus stops will only include the stop points for the outbound journeys.

  • Also the (approx) Distance covered is only for the outbound journeys.

Click the Start button to kick-off the building process and watch the (worm-like) network being created…do enjoy!!

For convenience, here is the link:
https://londontraveller.app/desktop/

Very clever! Now all you need to do is pout the route numbers alongside each segment and you’ll be generating the London bus maps that TfL doesn’t do any more!

A night bus only version might be interesting too.

As a general comment, it was not obvious to me how to get started when I accessed the site. I think I have to hit the LT disc in the middle in order to make the Start button work. The Start button makes options appear but these do nothing when I click on them; I have to use the drop down menu on the Start button instead. Is that what it is supposed to do, or am I missing something?

@mjcarchive

  • Putting the route numbers alongside each segment
    While it’s relatively easy to add, it would make the map too cluttered and also unreadable (overlapping, etc). That is why I added the hover feature to highlight the bus route. I can add the bus route number when it has been highlighted. Will that help?

  • A night bus version.
    Excellent suggestion - will add it as a configurable option.

  • Not obvious how to get started
    You’re correct there…but you got it right! You do need to “hit the LTr disc in the middle” to get started and then the desktop icons are displayed. It’s an invitation to discover!

So, (holding my hands up) I am from the Windows camp (DOS world if I am, to be honest) and the application is presented as a Windows Desktop in your browser. The Start button is on the Task Bar at the bottom and provides secondary access to the desktop apps i.e. the same as double-clicking the desktop icons. The primary access is to double-click on the desktop icons to start the application.

Anyhow, please put forward any other suggestions as I want to make the app useful for all users…the more the merrier!

Thanks for your suggestion and comments.

Cheers.

Ah. Double clicking. I was single clicking the icons, on the basis that that is what you usually do in web applications, which is what it will look like to most people.

It is counter-intuitive (for me, at any rate) to have a Start button visible that can’t work until something else has been (single-?) clicked. I think you probably need a bit of text explaining exactly how to get started, though really one operation is all that should really be needed.

I was not being entirely serious about route numbers alongside the segments and you would probably need to show where routes terminate as well. It was just that the first thing that struck me when I saw the screenshot was “it’s the London bus map reincarnated”. Then I realised that it was one layer of the bus map, one of the many typically included in a map (though I appreciate that the underlying Google map itself contains many layers). The framework, if you like, upon which other information is hung. There is a paid for download Greater London Bus Map already from the website of that ilk, so probably not much to be said for going in that direction.

In theory you could put links in to web sources on timetables for routes, arrivals at stops and so on but that all depends on which direction you want to move in and how far.

Final “challenge”, should you choose to accept it! A version which bands segments by number of buses per hour. Daytime frequencies, that is, though I suppose in theory you could have different maps with frequencies in the evening or Sundays. Well, we may need something like this to keep us form going stir crazy in the next few months…

Michael

Michael,

I have corrected the errors of my ways! (by way of your welcomed critic).

  • Double-clicking
    Replaced with the need of a single click (“what you usually do in web applications” - point taken)

  • Start Button
    The fact that clicking on a Start button does nothing is…well…as you said…“counter-intuitive” - again…point taken. So now clicking on the Start button does (hopefully) what is expected!

In addition, you suggested a Night Bus only version…so I present to you…the ability to configure the Settings to produce 3 versions:

  1. Regular Bus version only

  2. Night Bus version only and a

  3. Combine version.

I added a Settings option as shown in the screenshot below.


Just toggle the settings as required (defaults to combine version) and Apply.

Also added a bus route label when a route is highlighted on the map.

I have noted your other worthy suggestions, and over time my intention is to add arrival times, timetables etc.

Your time and suggestions are much appreciated.

Cheers,
Winston.

Winston

Very nice, though it is starting to remind me of maps of virus transmisson!

However, on the night bus network I think you have only covered the routes with an N prefix. The 93, for example, is not there.

It took rather more than a few seconds for the mapping info to be retrieved, to the extent that I feared it had crashed. It hadn’t but you might want to consider saying “up to 30 seconds” (or whatever it actually is) to reassure the user.

Michael

1 Like

Michael,

Yikes…virus transmission…at least this one is harmless!

  • You’re right…at the moment the night bus network “only covered the routes with an N prefix”. Apart from checking each bus route’s timetable, do you know of an indicator (or another easy method) to determine if a bus route is a Night Bus?.

  • User message
    I have updated the retrieval message to state an expected longer waiting time (up to 1 minute).

Cheers,
Winston.

I don’t know if you can tell automatically but you can find a list of all routes that run at night at
http://www.londonbusroutes.net/routes.htm#night.

You’ll have to decide whether or not to include the ones which only operate on Friday an d Saturday nights. The non-TfL 8 would be excluded.