Introducing: The Weekendest — Dynamic Map for New York City Subway

Using Mapbox and goodservice.io’s APIs, the Weekendest provides a high-level visualization of every train’s routing in real-time.

The Weekendest provides a high-level up-to-the-minute overview of where trains are/are not running. This screenshot was taken at 11:30pm on a weeknight and shows the transition of weeknight to overnight service patterns, as well as additional service changes (e.g. no service on Broadway due to Fastrack)

The New York City subway map is quite confusing. No, not because of its inconsistencies and questionable design choices. It’s confusing because it only reflects the service the subway system provides at its peak hours only. At other times of the day, and during weekends, it’s simply inaccurate. Even if you can remember the typical service patterns for weekends and overnight (the MTA has a somewhat helpful night map), train service rarely ever follows them then because of planned service changes, when trains are re-routed to allow maintenance work to happen on the subway system that runs 24/7. Now, there’s finally a map that can show you a high-level overview of the whole system as it happens in real-time, introducing the Weekendest.

Features

The Weekendest’s goal is to provide a visual overview of subway service across the whole system. Given that it is a digital map and not on paper, being able to interact with it is important. Not only can you can pan, and zoom around the system map, you can also select each train route to highlight its service pattern at the moment.

You can select a train route to display its current routing. This is the F train’s routing overnight this past week, when it was running over the A between W 4 St and Jay St–MetroTech downtown and running local both ways between Jackson Heights–Roosevelt Av and Forest Hills–71 Av.

You can also select a station on the map to zoom in on its proximity and view the highlighted train routes that serve it.

A view of Queens Plaza station with the train routes you can take there, along with their next train arrival times.

How it Works

In a previous blog post, I explained how goodservice.io used the real-time GTFS-RT data provided by the MTA to dynamically generate route maps for each route. Using the same dataset and cross-referencing MTA’s data on stations’ geolocation of longitude and latitude, I was able to plot on a map where each train route stops and connected the stops together for form lines. For this proof-of-concept, I was inspired by Aliza Aufrichtig and her i-want-to-ride-an-electric-citi.bike map’s simplicity, and so I used the same library of Leaflet.js and similar map theme to create a proof-of-concept.

Proof-of-concept for the Weekendest (October 2018)

While the proof-of-concept looked like a great starting point, there were a few issues that needed to be addressed. First of all, simply connecting stations together with lines was not good enough. Not only did the jagged lines look unsightly, trains that run express would often be shown to be running on a completely different path than their local counterpart(s) due to locations of the stations, which are often (but not always) not a straight line in real life. Secondly, the lines needed to not overlap each other. Typically, up to 4 routes can run along a segment. It’s impossible to assign offset positions for each route ahead of time, as their placement can change and the combinations can differ because of service changes. Lastly, given that it is a digital medium, we should take advantage of it by displaying the map differently based on user’s interactions and their zoom level. While Leaflet.js is very lightweight and loads very quickly, it lacks some of the interactive features I wanted.

I started looking into using Mapbox instead. I realized it can do what I wanted to do after looking at examples like Sarah Kleinman’s DC Metro Trip Planner, and Saadiq Mohiuddin’s using React and Mapbox to Map Calgary Bus Routes blog post along with his Calgary BRT map.

To render the lines more accurately, I parsed the published shapes.txt file from MTA’s GTFS dataset and created a graph that connected stations that are adjacent to each other. Then, I incorporated a recursive path-finding algorithm to determine the path to render between each pair of stations. As for determining the offset to assign to each train line for lines that run concurrently, well, it’s basically the classic Computer Science coloring map problem, so I came up with an algorithm for that too. With Mapbox Studio, I was able to create a custom map theme that hides unnecessary labels for this context, like states and cities, and also de-emphasized street names. With Mapbox’s JS SDK, I was able to create customized station symbols based on their stop patterns, and responsive sizes for the station names and route lines. Furthermore, I added additional interactive states to allow users to select a train route or station by either clicking on the map or by selecting from the sidebar, and put its context into the view.

When is the mobile app coming out?

I get this question a lot from the non-technical folks. The answer is, not for a while. I don’t have any mobile development experience, so this would be really difficult. But! You can add web apps to your home screen and iOS treats them basically like apps, anyway. So how about try that? Also, this is open source, so theoretically, you can create the app!

The web app being added to your home screen is close enough to be a mobile app.

The Weekendest and goodservice.io are open-source projects to provide New York City subway riders detailed and up-to-date routing and statuses using public APIs. Contributions are welcome on GitHub. Feedback can be directed to @_blahblahblah or @goodservice_io on Twitter.