Live Transit Visualization

After a push from @logic, I started working on a project to show live location of suburban trains based on transit.js. The idea is to make a map similar to this for many cities, with a choice of schedules (weekday/sunday). But I found the jQuery plugin, transit.js, too hardcoded and disorganised to perform what I wanted to and also to my taste.

I found other projects like:

  • LiveBus which does a live status map using SVG maps based on d3.js library and GTFS feeds of the bus data.
  • TransitLive which uses LeafletJS as the map library with their own OSM tiles. The schdule data seems to come from the backend service.
  • NextBus which has a textual realtime status and route maps based completely on Google Maps.
  • King County Metro which again uses Google Maps for the map and a custom way of loading data from its servers. The best map I have seen so far and loads a ton of JS.

Each has its own technology stack solving the same problem.This blog post details the use of GTFS data or the lack of it for realtime visualization. So the generalized picture seems to be that everyone is rolling out a custom version of their own.

So, I am going to create a simple library that can do this.

Here is the mockup usage of the library:

// Create a new livetransit object with the map type
var lt = new LiveTransit();

// Assign a div for the map
var divId = "map";
var mapType = "google";

lt.setupMap(divId, mapType);

// Overloaded to perform both addRoute and initiateMovement
lt.initiateMovement("chennai_velachery.kml", "chennai_velachery_weekday.json");

// ------------------------------------
// other probable cases to deal with
// -----------------------------------
// Specify a different schedule like Sunday/Holiday Schedule
lt.changeSchedule( "chennai_velachery_sunday.json" );
// change the location - city
lt.changeLocation( "new.kml", "new.json" );