I built KML to show a day in the life of Metro, but to view KML you need a program like Google Earth. So, it was time to figure out a way to show the same data directly in the browser. A good alternative is the Google Maps JavaScript API V3. Instead of describing lines, stations and trains in KML tags, I used JavaScript to control the map display. All this is contained in regular HTML.

There are three models of Metro:

The schedule data for the Red, Orange, Yellow, Green and Blue Lines came from WMATA’s GTFS data. For the Silver Line, I generated trips every 7 minutes, tapering to 10 minutes by midnight, and for the Purple Line I generated trips every 6 minutes. I did not implement the “Blue Line Split,” or otherwise worry about Silver Line cars crashing into others, as my goal was just to visualize the overall movement of the lines.

For the model showing just the Silver Line addition, I gave it my preferred route over Arlington Cemetery to the 14th St Bridge and onto the Green Line to Branch Ave. This would require construction of “Y” switches at 3 junctures, but prevents more than two lines from having to ever share tracks.

Clicking on a station pans and zooms to that station. Clicking on a train will zoom in and continue to pan as long as the train is moving, so that the map follows the train.

A clock at the bottom of the screen shows the time being simulated. You can control how fast the animation goes. For the first model, the screen is updated every 250 milliseconds. For the other two, it’s updated every 50 milliseconds. There are also buttons to restart the animation, and to play or pause.

For more information about the steps taken to get to this point, see the following posts:

Animating Metro in the Browser

Leave a Reply