Stat Tracker

Monday, May 2, 2011

Chicago Bus Radar - Builing a HTML 5 Application with Geo Location and Third Party API's

Chicago Bus Radar

For the past few weeks during my spare time I've been doing some work with the CTA (Chicago Transit Authority) API. For those who don't live in Chicago, the CTA manages all of Chicago's bus's and trains. About two years ago they upgraded all their bus's with a pretty sweet GPS system, as well as a Website for getting estimated arrival times ( Literally this was life changing for me when it was released. I rely exclusively on CTA for my transportation since I live in the city, and the ability to see bus times in real-time has saved me so much time.

My only problem with the default CTA Website is that its dumb when it comes to being location-aware. If I want to get the bus time for a stop I'm at, I have to either bookmark the exact bus stop into my browser on my iPhone, or I have to text message the CTA with the Stop ID.

The other problem I have is that its not very good for doing comparative analysis of bus stops. For example, I live in between two different sets of bus stops.  Both of these have routes which go downtown. Based on which bus arrives at a stop first, I can take either one to get downtown where I need to go. But I don't have a way to see one view of both the bus stops in the default CTA application.

Fortunately for me, the CTA released an API so that anyone who want to can access all the bus arrival time information. I just had to sign up and the CTA granted me API access. With the API Access I was able to quickly build an application which could do this. It is located at If you don't live in Chicago you won't get any buses naturally, so you can take a look at the screenshot below.

A few of the highlights:

1. HTML 5 GeoLocation functionality for cross platform compliance (iPhone, Android, etc)
2. is the platform which runs the application database and web pages, controller code, etc.
3. CTA API HTTP calls to retrieve the bus estimate arrival times from CTA System.

I'm still working on tweaking it some more, but right now its got 3,000 stops in the system which is about 1/4 of all the routes in Chicago. I still need to cache the rest of the Route's, as well as build an HTML 5 Manifest file for some nice icons on iPhone / Android devices.

I also need to add some filtering capabilities, differentiate colors on the Google Map, and a few more UI tweaks. But the major pieces are all in place at least.

Eventually I'll be posting the code sample somewhere, so if your interested in using to build HTML5 / Geo-Location based application you'll be able to pull the code as a reference.

Stay tuned, and peace out!