• ADVERTISEMENT

    How to Create a Minimalist Map Design With OpenStreetMap

    by AJ Ashton
    January 20, 2012

    Mapping can be as much about choosing what data not to include as to include, so you can best focus your audience on the story you are telling. Oftentimes with data visualization projects, the story isn’t about the streets or businesses or parks, but rather about the data you’re trying to layer on the map.

    To help people visualize data like this, I’ve started to design a new minimal base map for [OpenStreetMap](http://openstreetmap.org). What’s great about OpenStreetMap is that the data is all [open](http://www.openstreetmap.org/copyright). This means I can take the data and design a totally custom experience. Once finished, the map will serve as another option to the traditional OpenStreetMap baselayer.

    I’m designing the new map in the open-source map design studio [TileMill](http://mapbox.com/tilemill), which Development Seed has written before about [here](http://184.73.194.104/idealab-mt/mt-search.cgi?blog_id=31&tag=tilemill). The map can be used as a light, very subtle background to add data on top of for use either with our [MapBox hosting platform’s](http://mapbox.com/tour/) map builder or on its own. It still provides the necessary geographic context for a map, but moves the focus to the data added on top of the map — and not details that are irrelevant to its story.

    Here’s an early look at the features and design aspects I’ve been working on for the map.

    ![A look at Portland, Ore., on the new OpenStreetMap Mininal basemap](http://farm8.staticflickr.com/7014/6718278785_e401d26486.jpg)
    Portland, Ore., on the new OpenStreetMap minimal base map.

    1. Behind the design decisions

    I used the open-source [OSM Bright template](http://developmentseed.org/blog/2010/mar/23/speeding-openstreetmap-based-map-development-osm-bright-template) that you can load into TileMill as a starting point for the design and removed all color, choosing to limit the palette to light grays. For simplicity, most land use and land cover area types have been dropped. However, wooded areas and parks remain, indicated with subtle textures instead of color. The fact that OpenStreetMap’s data is open gives me full control of choosing exactly what I want to show up on the map.

    The style now includes more types of roads. Tracks have been added, as have pedestrian routes, bike paths, and bridleways, which are shown as dotted lines. Roads without general public access (for example, private roads) are shown faded out. The rendering of overlaying tunnels, streets and bridges has also greatly improved, with most overlapping lines separated and stacked in the proper order.

    ![Example Boston bridges](http://farm8.staticflickr.com/7005/6710168771_f462bd801c.jpg)
    Overlapping bridges in Boston.

    1. Coming soon: OSM Bright

    Many of the adjustments that I’ve made for this minimal style are things that can be pulled back into the OSM Bright template project. I’ll be working on doing this in the near future as I wrap up work on the minimal design. Keep an eye [on GitHub](http://github.com/mapbox/osm-bright) for these improvements as well as [our blog](http://developmentseed.org/blog/) for information about when the minimal design will become available for use.

    1. MapBox for design

    If you’re interested in making your own custom maps, try using [TileMill](http://mapbox.com/tilemill/) to style your data and pull in extracts from OpenStreetMap. Documentation is available on [MapBox.com/Help](http://mapbox.com/help/). We are close to launching [TileMill on Windows](http://mapbox.com/tilemill/windows/), so that in the coming weeks anyone using Windows, Mac or Ubuntu operating systems will be able to easily design custom web maps. You can see a preview and sign up for updates on [MapBox.com/Windows](http://mapbox.com/tilemill/windows/), and we’ll post details here on Idea Lab once it’s available.

    For more information on these tools and on [hosting plans](http://mapbox.com/tour/hosting/) to share them online, check out [MapBox](http://mapbox.com/).

    Tagged: map design mapbox mapping open source openstreetmap tilemill visualization

    Comments are closed.

  • ADVERTISEMENT
  • ADVERTISEMENT
  • Who We Are

    MediaShift is the premier destination for insight and analysis at the intersection of media and technology. The MediaShift network includes MediaShift, EducationShift, MetricShift and Idea Lab, as well as workshops and weekend hackathons, email newsletters, a weekly podcast and a series of DigitalEd online trainings.

    About MediaShift »
    Contact us »
    Sponsor MediaShift »
    MediaShift Newsletters »

    Follow us on Social Media

    @MediaShiftorg
    @Mediatwit
    @MediaShiftPod
    Facebook.com/MediaShift