Insights | 12/06/2017

HVV.live – Visualizing Hamburg's Public Transport

Everyone who is living in Hamburg or has visited the city before knows how useless a car can be during rush hour. But public transport can be tricky as well, what with delayed subway trains, canceled buses, and traffic jams. Franz Neubert, front-end developer at Ubilabs, wanted to tackle these problems and make using Hamburg’s public transport more reliable.

Public transport in real time

Supervised by Martin Kleppe, Head of Development at Ubilabs, hvv.live was created as a live map visualizing Hamburg’s public transport in real time. The map shows the city’s route network in a clear, lean design while providing the user with the most relevant information on buses, rapid transit and regional rail as well as ferries. Single vehicles are being displayed as dots that move along their routes in real time. Clicking on a vehicle highlights its route and opens up information on its next stop and current delay. With the help of special markers, users can easily determine their position on the map.

User-friendly design at a glance

User experience is key. That’s why Franz Neubert asked Mirko Hamann to join in on the project. The UX designer, who is a colleague of his, decided to adapt the color scheme of the vehicles and routes on the HVV Live Map to the well-known official colors of Hamburg’s public transport lines. By doing so, commuters and other regular HVV users will be able to recognize their standard lines on the map by color alone and will see at a glance if their next bus or train is near.

The HVV Live Map is a mobile-first web app based on Mapbox. Adding the website to your phone’s home screen results in the look and feel of a native app. Read up on the technical challenges and the project implementation on Franz Neubert’s Medium blog post “The Moving City”.

Future of the map

What’s in the plans for the HVV Live Map? Franz Neubert is already considering further map functions such as highlighting vehicles and stops in the user’s vicinity, push notifications for delays, or the integration of timetable information. The development possibilities are almost endless. Franz Neubert is happy to receive questions, suggestions, and feedback via his Twitter handle @Scarysize.

Disclaimer: The HVV does not provide an API. HVV.live uses data retrieved from http://geofox.hvv.de/jsf/mapsOSM.seam. In case of missing real-time data on vehicles, their position is interpolated.