Today on Mapbox.com we released a new world map tileset — World Glass. The main goal and unique feature of this map is fast and simple color customization. With its use of 24-bit PNG transparency, users can make the map fit well with the rest of their site simply by changing its background color.

World Glass map showing Africa with a chalkboard texture background.

Any color or even an image can be used, but darker or stronger backgrounds will work the best. All of the elements of the map are white with varying degrees of transparency, thus the map will appear invisible if put on a white or very light background.

Our first iteration of this concept was on HaitiAidMap.org where we used the different background colors of the map to help indicate different sections of the website. After the success of that implementation, we were excited to bring the possibilities of instant map customization to a general, whole-world map.

The map is intended to be used as a general base map of the world. It features labels and borders for countries and provinces, labels for major cities (with national capitals marked by stars), and detailed land and water. It has 10 zoom levels — 0 through 9.

To change the background of the map, simply apply a CSS background to any element that appears below the map tiles (in terms of z-index). For the demo on this page, I used the container div for the map:

Data Sources

Several free data sources were combined to put together this map.

We chose Natural Earth for the administrative boundaries because, although they are lower resolution than some other free sources, they differentiate between land borders and coastal borders very well. This has various aesthetic advantages, and for the scales and use cases in mind for this map, Natural Earth boundaries are well-suited.

The country labels are a custom data set I created for Development Seed based on information from the World Bank. Label positions are heavily tweaked by hand at lower zoom levels for minimal overlap. Dashed lines are used with some labels to allow them to be placed outside of the countries’ land area, and abbreviations or ISO codes are occasionally used when space is extremely tight.

World Glass with an underwater background, showing the optimized label placement.

For land and water information our source is OpenStreetMap, which we like because of its high level of detail. The land data is from recent versions of the ‘shoreline_300’ and ‘processed_p’, and the water data is extracted from a recent PostGIS import of the OSM database. We also included (very) subtle glaciated areas from Natural Earth. These are tinted slightly lighter than the rest of the land.

More information

We’re excited to see the creative ways people come up with to customize these tiles. They are available now to use for free within the standard MapBox terms of use, along with many other tile sets. Learn more at MapBox.com.