Modern cartography: Why map styling matters

October 15, 2012

In developing two map-based apps — Lunch?, our food truck tracker side project, and inThirty, our Apps For Metro Chicago entrant — we have had to learn quite a bit about map design. Like any other visualization, the difference between a well designed map and a poorly designed one can make a world of difference in getting across information to the viewer.

Cartography, the practice of mapmaking, has been around for thousands of years, with examples of the traditional birds-eye view map appearing on cave walls potentially as early as 25,000 years ago.  Now, people are using maps more than ever before- on in-car GPS systems, on their smartphones, and in their browsers.  

Several elements make up the design of a map- colors, symbols, line weights, perspective, labels and their placement- all of these things contribute to the look and feel of a map, its information density, its legibility, and ultimately, its usefulness. Gizmodo has an excellent example of this, with their recent comparison of Apple’s new maps for iOS 6 against the Google equivalents that they’re leaving behind.

For our maps, we’ve been tweaking the styling of them from the default Google Maps labels and colors.  We’re not the only ones doing this — the San Francisco design mavens at Stamen have become somewhat famous for their stripped down and colorful map visualizations, and recently Foursquare and Apple have switched from Google Maps to making their own styled map tiles.

Does this remind you of something?

So why not go with a standard Google, Bing, or Cloudmade map? Well, from the outset, a styled map can give an app a unique aesthetic. Everyone recognises the signature set of blues and golds and warm grays that a Google Map draws in- and sometimes, this is a good thing. But when you’re building a web app or visualization around a map, styling the map can be one of the best ways to give it a distinct look. Among others, we think inThirty, the New York Times taxi tracker, and the Oakland Crimespotting site are all excellent examples of how a properly styled map can give a web app a particular and unique aesthetic.

Aesthetics are just the beginning though. Famed modern cartographer Arthur H. Robinson liked to remind his readers and students that since the beginning of cartography, maps "have been made for some particular purpose or set of purposes".  The purpose of a standard Google map is to provide the viewer with a ton of geographic information all at once, from points of interest to highway interchanges.  But for apps like inThirty and Lunch?, the map exists to give a geographic context to other data. The more elements you can get rid of while still providing that context, the more visible the important data is. So not only did we recolor the maps for Lunch? and inThirty, we also removed a lot of unnecessary elements and labels.

The colors we did choose were chosen not just for stylistic reasons, but also to emphasize certain map elements and hide or de-emphasize other ones. In Lunch?, where users will likely be walking to a food truck rather than driving, we made points of reference like streets and transit stops visible while de-emphasizing elements like highways and points of interest that are irrelevant for orienting hungry Chicagoans in the Loop. For inThirty, where the default view is a more macro view of the city, we brought attention to things like bodies of water, train lines, and larger arterial streets to help the user orient themselves, while deemphasizing smaller side streets that have little to do with park/library accessibility.

If you’re designing a map style for your app, it may even be a helpful exercise to start with nothing and add elements until there are enough for the app to function well. Sometimes all that is necessary are outlines of political boundaries, or bodies of water and streets.

As far as tools go, we’ve used Cloudmade’s Web Maps Studio and the Google Maps API v3 along with their helpful Styled Map Wizard. We’re also currently exploring rolling our own maps using data from OpenStreetMap along with tools like TileMill, Polymaps, and Leaflet. We’re excited to give these open source technologies a spin in our future cartographic endeavours.

**Postscript:** Since this post was written, Apple's new maps have hit iOS 6 and the initial reviews have been not so favorable. Mike Dobson goes into the gory details of what's wrong with their new maps in this blog post. It just goes to show that no matter how you style your maps, having the underlying data in order is critical to the user experience.

contributors to this post

headshot of Brian Lange
headshot of Dean Malmgren
headshot of Suet Yi Lee
headshot of Mike Stringer
headshot of Aaron Wolf