Team 'DRADIS' created a bus tracking app that plots the progress of bus routes along maps in order to determine its arrival time at the bus stop.

R&D ›

The üBus app was developed to provide commuters with a useful bus tracker tool which will allow users to effectively plan their journeys, solving the common problem of commuters never knowing when their next bus is due. The app tracks the locations of every TfL registered bus and will enable commuters to save time waiting at bus stops as üBus provides its expected delivery time.

The vision for this app arose from Cyber-Duck staff waiting for the infamous 107 bus that travels directly past our office and is often inconsistent in its arrival time. The new app will allow the Ducks to plan what time they leave the office in order to catch the bus - providing a solution for being more efficient with their time. By pulling data from the TfL API, üBus plots the bus route onto Google Maps making it easier for commuters to track their bus and plan their journeys, based on the bus's arrival time.

Technologies

  • C# - the programming language used by .NET developers
  • JQuery -JavaScript library
  • Ajax - a string of technologies used to create asynchronous web applications
  • HTML / CSS - “bread and butter” web technologies for the structure, style and behaviour (respectively) of the web app
  • Google Map API - used in this project to plot bus routes on the familiar Google Maps interface
  • Tfl API - allowed the team to gather bus route and arrival time information

Challenges

The first challenge was getting to grips with the TfL API. The team worked out exactly what data we wanted to pull, but finding a way to parse the data became the most time-consuming element of our hack. The developers were successful in resolving this obstacle following an all-nighter by dedicated team members.

In the meantime, work was also done on the front-end UI and UX. Team 'DRADIS' opted for a minimal webpage to ensure the map was the core focus, while still providing information about the project. Some custom pins and pop-ups for the pins were also designed and added to the website's interface.

One of the issues we had with the TfL data is that it didn’t give location data for the buses themselves, but for the bus stops instead. This meant we couldn’t track live buses. We do however believe it is possible to map buses, but this will take more time and work.

How the App Works

When the hack was complete, the app worked by taking a search and saving the returned data to the server the website was hosted on. When the page was refreshed, that new data would populate the map and the user could see information related to their searched bus route. There was even functionality to reverse the bus route to see bus stops going the other way.

Every stop has an icon that, when clicked, provides the user with the following information:

  • Estimated time for the next bus to arrive
  • Next Bus Stop Name
  • Destination

uBus app in progress

The 107 bus route plotted on the üBus app.

Roadmap

The team now aim to build üBus on a live URL. Currently, it shows the front-end as intended, but the back-end functionality is not yet complete. We will try to track live buses based on estimated live locations. Once this functionality is complete we aim to roll out the application ensuring that all London bus routes are covered, not just limited to the 107.

This project was created as part of the "Quack Hack" Hackathon, where the team created 6 projects in the space of 32 hours.