Back to Blog

Network Overview, Real-time Arrivals: Building LiveBus - A Live Transit Map for Toronto

by duoyj
TTCTorontoReal-time BusLive Transit MapPWALeafletDevelopment Log

On January 11, 2026, I launched LiveBus—a real-time transit map for Toronto.

After launch, I shared it on Xiaohongshu and Reddit's r/toronto. Within 24 hours, LiveBus received nearly 3,000 visits. The Reddit post garnered 260,000 views and 1,300 upvotes. A week later, even after the promotional posts had cooled down, daily visits held steady at around 500.

This post is a look back at how I built LiveBus—from the first idea to launch day—and a peek at what's coming next.

LiveBus interface overview: showing real-time bus locations across Toronto

1. Origin: Why I built LiveBus

After completing the 2026 World Cup Visualization Map, I wanted to create something related to local life in Toronto.

Last July, a news article caught my attention: University of Toronto PhD student Andrew Ilersich had built TTCmap, which consolidates TTC subway service changes and disruptions on a real-time interactive map. Although many real-time transit apps already exist, TTCmap's lightweight, intuitive, and practical approach left a strong impression on me.

TTCmap screenshot: showing subway service changes

TTCmap focuses on subway service changes and disruptions, and Andrew mentioned plans to expand to buses and streetcars in the future.

To avoid overlap, I decided to focus on real-time vehicle locations and ETA predictions. Since TTC doesn't yet share real-time subway location data, I chose buses and streetcars as my entry point and started building LiveBus.

2. Vision and design philosophy

We've all been burned by ghost buses. You text for arrival times, the app says "5 minutes," and... nothing shows up. LiveBus solves this by letting you see both the ETA and the bus's live location on one map—so you can judge for yourself if that "5 minutes" is real.

Most real-time transit apps pull data from TTC or third-party APIs. Many can show you both vehicle and stop info. LiveBus draws from the best of each. Since data sources are largely similar, I focused on how to present the information, building around three principles: fast response, intuitive display, and user-friendly interaction.

This vision shaped LiveBus's core functionality: a map showing live bus locations, where you click any stop to see ETAs. You can cross-check between what the vehicle shows and what the stop shows—giving you more confidence in when the bus will actually arrive.

The design philosophy is lightweight, easy-to-use, and intuitive—not trying to do everything, just answering two questions: "Where's the bus?" and "How long until it arrives?" Pull out your phone, see at a glance, check and go.

Based on this philosophy, I built LiveBus as a Progressive Web App (PWA). No download needed—just open it in your browser. You can also add it to your home screen for one-tap access.

LiveBus PWA mobile interface

3. Learning from others: Similar app research

Before diving into development, I researched existing apps. I focused on real-time transit apps with map interfaces, evaluating these dimensions:

  • Live vehicle locations and direction
  • Stop ETA
  • Multi-route display
  • User-friendliness

These evaluations are based on standard searches and brief trials—they may not fully reflect each app's capabilities, just my observations.

3.1 TTC official website

The official TTC real-time map is feature-rich: it shows live vehicle locations, direction, and ETAs for each stop. You can view multiple routes simultaneously, but you need to pre-select which routes to see.

The base map uses Google Maps, so you can check real-time traffic to cross-check arrival times. However, map interaction feels somewhat slow.

The mobile experience is average—popups contain too much information and crowd the screen.

TTC official website: clicking a vehicle shows detailed info and occupancy

TTC official website: clicking a stop shows ETA predictions

3.2 Transit

An official TTC partner app. Its core advantage is automatically detecting and displaying unplanned bus and streetcar detours.

It shows route maps, live vehicle locations, and ETAs for each stop, with strong design aesthetics. Most features require a paid subscription.

Transit app screenshot

3.3 Transit Now

This app shows route maps, live vehicle locations (with direction), and expected arrival times for each stop. The interface is clean and feature-rich.

Like the TTC website, it uses Google Maps—panning and zooming feel slow, and there's no real-time traffic view. No multi-route display.

Transit Now app screenshot

3.4 My TTC

Functionally similar to Transit Now, but you can't switch between different stops on a selected route.

My TTC app screenshot

3.5 TTC Watch

Shows bus stops, ETAs, and live vehicle locations (with direction) on a map. The base map appears to use Apple Maps—no traffic view. You can display multiple routes, but you need to manually add them.

TTC Watch app screenshot

3.6 totransit

Shows live locations (with direction) for every bus on a selected route, but no stop ETAs.

totransit website screenshot

3.7 umo

Shows route maps, live vehicle locations (with direction, even "stopped" status), and ETAs for each stop. Intuitive and easy to use.

You must first select a route and stop through a text interface. Even if a stop serves multiple routes, it only shows ETAs for your selected route.

umo app screenshot

3.8 Citymapper

Primarily a trip planner. You can click any stop to view ETAs, but it doesn't show live vehicle locations.

Citymapper app screenshot

3.9 Summary

AppLive LocationDirectionStop ETAMulti-routeNotes
TTC WebsiteManual route selection, info overload
TransitLess clearPolished, smooth interaction
Transit NowMap loads slowly
My TTCSlow map, awkward stop switching
TTC WatchManual route addition
totransit
umoText-first interface
CitymapperTrip planning focus

There are already many mature apps giving TTC riders plenty of choices. But most require you to manually select a route before viewing vehicle info.

No app takes a city-wide perspective, automatically showing all nearby vehicles and stops based on your location—no route selection, just open and see everything.

That's exactly the gap LiveBus fills.

4. LiveBus features and positioning

4.1 Main features

  1. City-wide live view: Open the app and immediately see all operating buses and streetcars across Toronto. No route selection—see the entire city's transit network at a glance. LiveBus refreshes vehicle locations every 10 seconds.

LiveBus city-wide view

  1. Location-based display: After you grant location access, the map zooms to your neighborhood, showing all nearby vehicles and stops. Click any vehicle or stop for instant info. By cross-checking vehicle locations against ETAs, you can more accurately judge when your bus will actually arrive.

LiveBus location-based display

  1. Subway station layer: To help with transfer planning, subway stations appear as an optional layer. It's off by default—you can enable it anytime as a location reference.

4.2 Key features

LiveBus ditches nested menus. No navigating through text to select route → direction → stop. All vehicles and stops appear directly on the map. Want to click a bus? Click it. Want to click a stop? Click it. Jump freely across the map and cross-check. Smooth zoom and pan, info popups on tap.

4.3 What I don't do

  1. Trip planning: Google Maps and TTC's Triplinx already do this well. LiveBus focuses on "where's the bus"—I'm not duplicating their work.

  2. Service alerts: TTCmap excels at this. When you notice a stop has no ETA and no vehicles nearby, you'll naturally check TTC or TTCmap for disruptions. This "triggered" approach works well enough.

  3. Route display: Showing the operating route after clicking a vehicle would be helpful. But TTC has many branch routes, and poor handling could mislead users. Saving this for later.

4.4 Target users

You can't please everyone. LiveBus focuses on two types of users:

  1. Visual-oriented users: If you prefer maps over text menus, LiveBus is for you. Smooth zoom and pan let you quickly grasp the full picture.

  2. Commuters who know the routes: If you already know Toronto's streets and your commute routes by heart, you don't need trip planning—you just want to know "where's the bus?" For users new to the city, LiveBus complements planners like Google Maps.

5. Data sources

5.1 Transit data

  1. Live vehicle locations: I use Vehicle Positions real-time data from the TTC website.

  2. Stop locations: TTC publishes stop locations in several versions. I chose the most streamlined: TTC Routes and Schedules. This data is hardcoded, with monthly updates—I can also update manually anytime.

TTC stop data source

  1. ETAs: I use the API from Umo IQ (formerly NextBus API). It's simple and supports per-stop queries. The downside: it's third-party, so stability may not match official sources. I may switch to TTC official data later.

5.2 Map base layer

I noticed TTCmap's base map changed from Google Maps to Protomaps PMTiles. This self-hosted solution aligns with LiveBus's lightweight philosophy. I followed suit, downloading map tiles and self-hosting on Cloudflare R2, achieving significant performance gains.

Also following lightweight principles, I built LiveBus with Leaflet.

6. Development insights

6.1 Real-world validation

From daily use, the app runs stably, responds quickly, and updates promptly—achieving my design goals.

Some unusual situations have also been validated. The screenshot below shows ETAs indicating three buses arriving almost simultaneously. You might suspect a data error.

LiveBus unusual case

With that suspicion, you can immediately check the map. Sure enough, three buses really are arriving almost together.

LiveBus unusual case 2

Occasionally, vehicle and stop info don't match. Below, a bus isn't far from the stop, but ETA shows 22 minutes—clearly something's off. This demonstrates the value of cross-checking: when info seems wrong, you can judge for yourself or check the TTC website for disruptions.

LiveBus info mismatch

I'll discuss data limitations and optimizations below.

6.2 Avoiding data misuse

Using open data means being responsible. To avoid overwhelming source servers, LiveBus implements tiered caching: vehicle locations cache for 10 seconds server-side, and ETAs cache for 10 seconds too. While cached, user requests are served locally without hitting upstream servers. For vehicle locations, when multiple users request simultaneously, the server consolidates them into one upstream request—further reducing load on data sources.

6.3 Initial location speed

When you first open LiveBus, the browser may need 3–5 seconds to get your location. This is especially noticeable on phones—GPS needs time to "warm up." To avoid making you wait, LiveBus first shows a panoramic Toronto map, then jumps to your neighborhood once location is ready. In the future, I may estimate location from network info first, showing the map near you faster before refining with GPS.

7. Future outlook

7.1 Data and feature improvements

ETA data: Currently, stop ETAs come from Umo IQ. I'm not sure how it compares to TTC official data in accuracy. TTC provides rich GTFS-RT data (Trip Updates, Modified Trip Updates, Trip Modifications). I'll explore migrating to official sources.

TTC occupancy data

Route display: Showing the operating route after clicking a vehicle or stop would be useful. Once I verify data reliability, I'll consider adding this.

Occupancy info: TTC provides real-time bus occupancy. When multiple buses arrive in quick succession, this helps you choose a less crowded one. I plan to add this.

Occupancy example 1 Occupancy example 2 Occupancy example 3

7.2 Interface polish

LiveBus still has details to refine: showing vehicle and stop IDs, optimizing typography, improving popup layout. These small changes can significantly improve the experience—planned for future versions.

8. Conclusion

LiveBus came together thanks to open data from TTC and the City of Toronto, plus inspiration from projects like TTCmap. The open-source community's sharing spirit makes "small tools" like this possible.

Everyone processes information differently. Some prefer text lists; others prefer maps. I'm the latter—I like seeing live vehicles and stops interact on a map, intuitive and efficient.

I built LiveBus largely for myself. I use it frequently in my daily commute. If it happens to help other TTC riders too, that's wonderful.

留言 / Comments