Miami Street Orientation

In many American cities the street grid system is often reflected in the names of the city's streets. For example in some cities you might find that all roads called 'Avenue' run north to south, while all roads called 'Street' run west to east (or vice versa depending on the city).

It is possible to visualize this pattern very effectively with an interactive map and a radial chart. My Miami Streets map visualizes the directions of all roads called 'avenue' and 'street' in Miami. On the map all roads named 'Avenue' are colored red and all roads named 'Street' are colored blue. Simply by looking at the map you can tell that streets and avenues run in distinctly different directions in Miami. The radial chart on top of the map visualizes this more explicitly, showing the overall orientation of all the streets and avenues in the current map view (move the map around and the radial chart will update to show the orientation of all streets and avenues in the current map view).

By exploring the map you can see 'streets' in Miami run almost exclusively west to east while 'avenues' run north to south.

All the code for my map comes from Vladimir Agafonkin's fantastic Road Orientation Map. Vladimir's map visualizes the orientations of all roads in the current map view. The map can be used to explore the orientations of roads anywhere in the world. For my map I tweaked the code to only show the orientations of roads named 'avenue' and 'street' and to ignore all the roads called 'lane', 'avenue', alley' etc.

The original Road Orientation map fetches all the roads in the current map view with a single line of code:

var features = map.queryRenderedFeatures({layers: ['road']});

In effect it queries the layer named road in a Mapbox map. This means we can simply change the layer name to fetch different data. For example we can easily change the query to fetch the layer which displays waterways:

var features = map.queryRenderedFeatures({layers: ['waterway']});

Simply by changing 'road' to 'waterway' we can alter the map to display the orientations of all rivers and canals rather than the orientations of roads.

The original Road Orientations Map will work with any map layer in which the mapped feature is of the type 'line' (so map data which is in the form of polylines). Therefore to create my map I only needed to upload two GeoJSON files to a Mapbox style:- one GeoJSON file with the data of all 'avenues' in Miami and one GeoJSON file with the data of all 'streets' in Miami.

In Mapbox Studio I named these two layers 'avenues' and 'streets'. All I needed to do then was change the JavaScript to query my two layers rather than the 'road' layer:

var features = map.queryRenderedFeatures({layers: ['avenues', 'streets']});

Miami is not the only American city which helps you orient its grid system by having its avenues and streets running in different directions. New York also uses this form of street planning. You can see this on my Street Orientations map, which visualizes the directions of all roads called 'avenue' and 'street' in Manhattan.