Designing Desaturated and Multilingual Iraq Maps

Blog

Estimated
3 min read

We just finished a custom tile set for UNICEF’s “An Iraq Fit For Children” campaign. This campaign surveyed hundreds of Iraqi children to learn how they feel about themselves, their communities, and the future of their country. Part of the website will map the results to different governorates and districts to give a visual sense of the issues that matter most to children in different parts of the country.

Zoomed out view of the tile set of Iraq we designed for UNICEF. Zoomed out view of the tile set of Iraq we designed for UNICEF.

This less saturated color palette is meant to work well with the web design and put a focus on the survey data. To that end we also took out some details that we felt would be a distraction, as well as highlighted Iraq’s land area.

To make the maps, I pulled together data from a variety of sources. Much of it was provided to us by UNICEF, but we also used some road and boundary data from OpenStreetMap and elevation data from SRTM.

One requirement of the map was that it have bilingual labels since the website will be in both English and Arabic. This was easily achieved since Mapnik supports multiple labels on the same point. The Arabic label was offset up, and the English offset down. Doing labels this way allowed us to use different fonts for the two languages.

Bilingual labels of the Iraq tile set. Bilingual labels of the Iraq tile set.

We included hillshades to provide some additional geographical context in a subtle manner, and not as a main feature.

A look at how we integrated hillshades into the tileset to provide additional information. A look at how we integrated hillshades into the tileset to provide additional information.

UNICEF provided us with road data, and it was mostly of major routes. We integrated less prominent roads from OpenStreetMap, which had more detailed data of urban areas. Often combining different data sets like this doesn’t work very well because of differing levels of accuracy or slight misalignments. Fortunately the UNICEF and OpenStreetMap data lined up well and we were able to use both. Neither data set has very many road names, however, and only major highways are labelled (with Mapnik ShieldSymbolizers).

Road details within the tile set. Road details within the tile set.

The UNICEF tiles were optimized to indexed PNGs. If you want to lean more about map file formats and performance we posted some details on MapBox.com.

There’s a color tile set of Iraq now publicly available on MapBox.com that’s available to use if you’re looking for similar tiles for a project. As you’ll see, the map is in both Arabic and English. We used the JPEG format for this tileset to optimize file size while retaining a full color palette. There’s a full-page demo of the map set up, which you can see in a smaller version below.

We also have some resources on how to use tile sets like this that may be helpful. If you want to see how to add custom tiles to Managing News, an open source news and data aggregator, watch Will’s demo on Customizing Maps and Geo Data in Managing News. There are also instructions for adding custom tile sets to Google Maps on MapBox.

What we're doing.

Latest