Transit maps done well are beautiful and functional visualizations of how people move through a city. For this DC Metro Trip Planner map, I used Mapbox GL JS data-driven styling and real-time train predictions from the Washington Metropolitan Area Transit Authority’s API. By using data-driven styling, multiple metro lines can be styled in a single layer instead of separate layers for each line.
Read on for the full demo!
Building the Map
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.
map.addLayer({'id':'metro-lines',// ...'line-color':{'property':'NAME','type':'categorical','stops':[['red',red],['yellow',yellow],['yellow - rush +',yellow],['green',green],['orange',orange],['orange - rush +',orange],['blue',blue],['silver',silver]]}// ...})
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.
map.addLayer({'id':'metro-lines',// ...'line-offset':{'property':'NAME','type':'categorical','stops':[[{zoom:10,value:'silver'},3],[{zoom:10,value:'blue'},0],[{zoom:10,value:'orange'},-3],// ...[{zoom:14,value:'silver'},6],[{zoom:14,value:'blue'},0],[{zoom:14,value:'orange'},-6]]}// ... })
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.
Learn how to style and offset lines based on data-properties using Mapbox GL JS and get started with our Mapbox GL JS documentation.