MapBox Streets Design Update
We just completed a major design update to MapBox Streets, our customizable basemap built on data from OpenStreetMap. The changes greatly improve the clarity and readability of many important features. This blog post will go over the biggest changes we’ve made, and dig into some of the data processing and styling details that went into the work.
A major area of focus for this update is improving the readability of labels on the map. The size of our text has been increased overall, with important things like countries and major cities seeing dramatic bumps in size. We’ve also focused on improving the density of labels to provide a better balance between highlighting enough things in rural areas and not overloading dense urban areas.
Cities, towns, and villages
The OpenStreetMap database contains well over two million places, including tens of thousands of cities and towns and hundreds of thousands of villages. At smaller scales there isn’t room to show all of these labels. With the latest version we’ve greatly improved the way we generalize and prioritize this data to highlight more important information.
Previously our zoomed out views of the globe used city labels from Natural Earth, and we only started showing OpenStreetMap names after you zoomed in a bit. This worked well because Natural Earth has a much more granular ranking classification system aimed at helping cartographers choose the right sizes and density of labels for their maps. The Natural Earth place names, for the most part, are only in English. But we still want to take advantage of the many locales that OpenStreetMap contributors have put together, especially to show place names in their local language and writing system.
To get the best of both worlds we joined Natural Earth’s scalerank information into our OpenStreetMap places table. This was not straight-forward - spellings and locations differ a lot between the two datasets, so we need to be lenient about both of these aspects while trying to find the best match. The join was accomplished with a Python script that compared each Natural Earth place name to the name tags of nearby OpenStreetMap places. It uses increasingly fuzzy string matching if no exact match is made. (The Python libraries Unidecode and difflib were very useful for this.)
With the ranking information from Natural Earth joined into the OpenStreetMap data, we can make much more effective decisions about label sizes at low and medium zoom levels.
On the left, city labels from Natural Earth. On the right, scale ranks from Natural Earth applied to OSM data.
More and better road labels
With this update you should see more road labels on more zoom levels, especially for more important urban streets or isolated rural highways. At higher zoom levels we’re also labeling more kinds of routes, like tracks, footpaths and cycleways.
Another area where we’ve made improvements is with administrative boundaries. The line information has simplified at lower zoom levels for cleaner rendering, and boundaries over land have been darkened to be made more visible. Boundaries that extend out into the ocean, on the other hand, have been downplayed significantly.
For those of you familiar with the OpenStreetMap data model, this was done by importing all of the boundary relations as their individual constituent ways, and not building them into polygons as is commonly done. Information from each of the parent relations was copied to their children, and in cases where a single way is member to multiple boundary relations, information from the parent with the lowest
admin_level value took priority.
This approach avoids overlapping lines and allows clean dashed lines to be made. We can also look at any tags applied to the boundary relation members, such as tags that would indicate a maritime boundary or a disputed status.
Some improvements have been made to the way we draw streets and paths. At medium scales where residential streets are just coming into view, motorways and other major routes are highlighted with a more prominent outline.
Access roads and private roads are now drawn as bare lines without casing in order to separate them from and keep the focus on the main road network. Private roads, or roads that otherwise do not have general access, are also indicated by dashed lines. Small types of service roads such as driveways and parking aisles have been even further downplayed.
The limited access roads and driveways around the White House in Washington DC
Available now, with more coming soon
If you’re already using MapBox Streets, these updates have been rolled out automatically. New maps can be created from your MapBox account - sign up for free if you don’t already have one.
Looking ahead, we’re continuing to work on new features and improving the ways we display OpenStreetMap data on our map. We’d love to hear your feedback, and also see how you’re use MapBox Streets. Tweet at us at @MapBox.Map data in MapBox Streets is © OpenStreetMap (and) contributors, CC-BY-SA.