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.

Type in a metro station name or view the full-screen demo to explore the map.

Learn how to style and offset lines based on data-properties using Mapbox GL JS and get started with our Mapbox GL JS documentation.