Building Better Online Transit Mapping For All

By David Emory 01 Oct 2014

A version of this post originally appeared at Mobility Lab.

One of the exciting aspects of the Arlington Transit Tech Initiative is how it rethinks the way information about travel options is visually presented.

In April, we introduced you to the Transitive.js library, a web-based visualization platform created for the Transit Tech Initiative. Today, we look at how it can serve as a resource not just for that project but for online transit mapping in general.

Much of the inspiration behind Transitive is drawn from the practice of schematic transit mapping, which has become a popular and familiar way of depicting complex transit networks in cities around the world.

At the core of schematic mapping is that spatial elements are reduced to simple forms that highlight the most relevant pieces of information about connectivity and structure, often at the expense of geographic precision.

While this approach is useful in helping people quickly grasp the essential structure of a network or journey, one potential downside – compared to traditional mapping – is that much of the detailed geographic context can be lost. Furthermore, schematic rendering is more appropriate when we are more interested in overall network connectivity than geographic precision, like on buses or trains. Bike or car journeys, in turn, are more useful when displayed as geographically accurate paths through the street network.

Much of our work over the past several months has focused on capturing the benefits of both the schematic and geographic approaches in a Transitive map. For example, when rendering transit lines, we can have the display transition gradually from a highly abstract schematic map to a more traditional geographic view as the user zooms in. Meanwhile, non-transit options such as bicycling and driving are displayed as geographically accurate paths at all zoom levels.


When zoomed all the way out, the transit option for this particular commute is rendered with a high degree of abstraction — lines are constrained to 45-degree angles and only major points of interest (such as transfer locations) are fixed to their real-world locations.


After zooming all the way in, the map has transitioned to one that is entirely based on real-world geography, with additional detail and precision added.

Another central element of the Transit Tech Initiative is the styling framework – everything from color and line thickness to iconography and typography. We hope we’re designing TTI so that designers will be able to adjust how map items are displayed to their own choosing. So that the project fits into an already-popularized design aesthetic, we are creating a styling “language” for Transitive based on CSS – the stylesheet language already used for styling a wide range of visual content on the web.

Currently, styling rules are specified via a definitions file written in Javascript, but work is also underway on a web-based styling tool that will allow users to interactively style Transitive maps without the need for extensive knowledge of Javascript and CSS.

Finally, Transitive is intended, as the basic demo shows, to be created, configured, and embedded with just a few dozen lines of code. We are in the process of finalizing and documenting an API that will provide developers with a simple, standardized set of methods for interacting with a Transitive map within their application.

The Modeify application, also being developed for the Arlington Transit Tech Initiative, is currently the primary example of Transitive being integrated into a larger, full-featured application, and we can expect to see other such uses as the project matures.

You can continue to follow the project’s progress on Github and at the TTI homepage on Mobility Lab.