As a part of our work building the next version of the United Nation’s ReliefWeb, we designed a new world map tileset that builds on some of the techniques we used in our World Glass tiles at MapBox.com. This map makes use of PNG transparency to provide extreme design versatility — the color scheme of a ‘glass’ tileset is defined by the background color of the container element of the map. This is an advantage for the U.N., who can now use a single custom tileset based on their GIS standards across multiple sites and still customize the colors to fit each site’s design.

With glass tiles, a pattern can even be used in the background instead of a flat color, something you can see here for ReliefWeb.

Like World Glass, this map features semi-transparent white land with fully transparent water bodies. Land masses are outlined by a shadow, which also functions to indicate smaller islands not necessarily visible at lower zoom levels. The only other details in these tiles are international borders and labels, keeping the map clean for visualizing other data or content on top of it.

Technical details

For technical users considering designing their own map tiles, I’ll share some additional details about how these were made. As with all MapBox maps, the design and rendering was done using Mapnik. Some of the transparency effects I wanted to achieve are not directly possible with Mapnik, so the process was broken up into several component designs, each with their own Mapnik files and output. With the original World Glass design, the transparency was added as a post-processing step on the individual tiles. This time it was done in pre-processing, and the final tiles were rendered directly by Mapnik.

Step 1: Land forms

The land forms were designed much like the original World Glass tiles — as a black-and-white mask. The advantage of doing this versus using Mapnik’s transparency capabilities is that it gives you the ability to make transparency out of non-background objects and avoids any weirdness associated with overlapping semi-opaque shapes.

Instead of rendering the map to standard web tiles, it was rendered with nik2img.py as a series of whole-world images, sized to match the extent of each zoom level we wanted to show — from zoom level 0 at 256x256 pixels to zoom level 6 at 16,384x16,384 pixels. The greyscale mask images were made transparent using ImageMagick and then converted to geotiffs using GDAL. If you are interested in the specific steps, take a peek at the shell script I used to do all this.

Step 2: Drop shadow

The drop shadow around the land forms was created using three graduated line symbolizers to fake a “glow” effect and a polygon symbolizer to block out the land area. The resulting mask rendered by Mapnik looks like this:

This was rendered and converted to transparent geotiffs using the same script as in step one, with the main difference being that black was used as the ImageMagick canvas color (and of course the file names).

Step 3: Borders, labels, and bringing it all together

The final map was designed using the images rendered in the first two steps. Each image is added as a GDAL Layer in Mapnik and styled to only appear at its respective zoom level. With the borders and labels designed, the map was ready to render. Tiles were generated using TileCache’s seeding script.

Still experimental

Much of this process was an experiment to explore different ways of integrating transparency into a map. It worked well in our case where we were only dealing with country-scale zoomlevels, and we are certainly happy with the results. However, this ‘world-sized tiff’ technique will not scale for more detailed maps since file sizes and processing times would become much too large.

It should also be noted that there is a bug in stable versions of Mapnik that will cause problems with rendering geotiffs (and certain other objects) containing alpha transparency. If you want to try out this method, you should use a recent build of Mapnik trunk or your results may not look quite right.