Live train and tram locations in CitySpace
A new way to look at London's transit system in the third dimension
Project overview
Technologies
- Apple Vision Pro
- TfL Unified API
- MapKit
- RealityKit
Tools
- SwiftUI
- Xcode
- PyCharm
- RapidAPI
Key features
- Look at the live locations of London's transport
- 3D spatial map of the capital's transit
Contributors
Why we built CitySpace
- Create a highly interactive way to visualise data across a map
- Push the visionOS platform in a new direction that we have not before
Methodology
Window shopping for transport data
The TfL API is fairly rich with data, but a lot of key info we need for the project is stored in different endpoints. For example, the stop locations for the Victoria line are in one endpoint, and the locations of the tube trains on that line are in another, etc.
We needed to do a bit of up front discovery into what endpoints we needed and which we didn't and then organise them in a tool we use called RapidAPI (formerly Paw).
We decided early on to just save static data, after a bit of cleaning and restructuring with Python using PyCharm, locally in the app bundle to save on making multiple network calls only to return all the tube stops in London every time the app needed it (which is a lot!) but leave dynamic data (e.g. transport locations) to the API.
A Doctor Strange portal above London
After cleaning and storing the static tube station locations locally into the bundle, we played around with some UI in SwiftUI.
We envisage the app being a horizontal map, like a table top, that the user can interact with and see the live transport like a train set. However, for now at least there is a bug where the hit registration, i.e. when the user interacts with the map, the app still thinks the map is vertical so the UI bugs out.
Locating the trains
Next came finding an efficient way to get the live train locations with as few API calls as possible. Luckily, there is a similar project out there, but on web, called TrainTimes by Matthew Somerville that has setup his own API that returns all the live (to the nearest 60 seconds) locations in a single request!
Learning trigonometry at school FINALLY pays dividends
We decided to borrow his API, for now at least, to get the live train locations with their subsequent stops which is useful for calculating the bearings. We had to use trigonometry to calculate the angle between the train's current coordinates and the next station's coordinates to produce the train's bearing.
Teachers take notes for when the next time a student asks when trigonometry would be useful in the real world! 🤓
We then setup an asynchronous stream to "poll" the API every 60 seconds to fetch all the new locations of the trains and update their bearings.
Not just an adult's toy train set
Business intelligence data across geographies
A component like this would be useful in a spatial BI tool, like the one we built. It could be used to bring another dimension to the standard 2D heat maps you get in current BI tools.
Tracking logistics
An app like this could be used to track a large logistics operation around the country. Giving you instant visibility over the whole operation, so you can identify bottlenecks and disruptions.
Infrastructure networks
Follow key infrastructure over a map such as water, power, transport, communications, fibre optics and more.
Payments networks
Track payments across a network and see where volumes of transactions are coming from over various geographies.
Government and emergency services
Track key government and emergency service vehicles across the country. Giving visual insights into how services are being dispatched and their live whereabouts.
Contributor notes
To be continued...
This is still a WIP, we want to add more attached windows to the volume of the map that have a bunch of information like expected arrivals and departures, as well as controls adding to the value of it being a spatial app.
A key benefit of being a visionOS 3D app is that you can take in much more information at with a single glance than on a phone or even a desktop app. This will be the ultimate direction of CitySpace, to demonstrate this.
This kind of app being spatial also makes it feel more natural to interact with, kind of like going to a museum and finding an interactive exhibit, you just feel a stronger connection with what you are looking at, and that is important when it comes to data navigation and consumption.