Designing a Minimalist OpenStreetMap Baselayer for MapBox

January 17 2012 by AJ Ashton

I am designing a new minimal OpenStreetMap base map in TileMill to use with MapBox hosting platform’s map builder. The goal for the design is a general OpenStreetMap layer that can be used as a light, very subtle background for compositing further data on top of. Here is an early look at the features and design aspects I have been working on for the map.

Boston-Cambridge

I used the OSM Bright template 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 and are indicated with subtle textures instead of color.

Label improvements

For city labels I’m making use of the ‘simple’ label placement logic new to Mapnik 2. With this method you can specify multiple placements for the renderer to attempt, and the label will be rendered in the first one where it fits. The result is more cities end up being labelled at low scales.

U.S. Northeast city labels Improved label placement in the Northeast United States.

I’ve also created shield styles to show route numbers for major highways like I-95 at mid-level scales.

Road improvements

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 Overlapping bridges in Boston

The tunnel and bridge improvements are one of the more significant changes. The method I used was inspired by the bridge handling in Michael Migurski’s excellent High Road project. The method involves pulling multiple copies of the same bridge or tunnel segment from the database in order to render the casing and fill. Road casing is something I normally handle in Carto with multiple symbolizers on the same object. But in the case of bridges where you are dealing with potentially many overlapping layers, it’s easier to control the rendering order with PostgreSQL’s ORDER BY than it is with Carto attachments. Some modifications to the ImpOSM import mapping were required in order to bring in the layer tag value from the OpenStreetMap data.

At first glance it might seem like I’ve removed the outlines from standard roads. What I’ve actually done is made the casing the same color as the land. Rather than a standard outline, this provides a pseudo-knockout border when roads pass over tunnels or land cover textures.

Example Chicago trails Trails cutting a path through a wooded area in Chicago.

This border is slightly wider trails, cycleways, and railways. These features are represented by thinner dashed lines, and a wider outline give them some breathing rooms from any background texture and also makes for nice-looking bridges.

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 for these improvements as well as our blog for information about when the minimal design will become available on MapBox.

MapBox for design

Try using TileMill to style your own data or pull in extracts from OpenStreetMap. If you are new, check out our documentation on mapbox.com/help and follow us on Twitter @MapBox - you can also sign up to our email newsletter for updates every few weeks. When you’re ready to share your maps, check out MapBox plans starting at just $5 a month.