Using GIS data from DC Open Data, I added the metro lines and stations as layers to the map. Data-driven styling makes it easy to style and offset your transit lines based on the geographic data itself. With data-driven styling for the line-color property, metro lines can be added as a single layer instead of separate layers for each line.
Mapbox GL JS recently released data-driven styling for the line-offset property. Data-driven styling with zoom-level functions ensure that the transit lines lie next to each other at all zoom levels. This functionality will be rolled out for Mapbox Mobile SDKs in early 2017.
The map incorporates a sidebar using real-time data returned from the WMATA API. A click on a station or on the drop-down menu will call the API and return the latest train prediction times for that station.