Shaping a butterfly

Creating a beautiful world map using open source data & software

Fabian Ehmel & Boris Müller
University of Applied Sciences Potsdam

April 2019

We designed a world map based on a butterfly projection, using only open source data and mainly open source tools. The map is two and a half meters wide, displays Earth in a natural-inspired but abstracted color scheme and features hillshades and beautiful typography.
This is a mostly technical documentation on how we approached this challenge. If you are interested in our motivation, please also read Boris Müller’s related essay.

Setup

Geographic Projection

Butterfly projections have been introduced to cartography by Bernard J.S. Cahill in 1909. Steven Waterman developed them further and published his projection in 1996. Today, an open source version of the butterfly projection is implemented in the D3 geo projection package—this is the one we used for our map.

Rendering

Relying on the D3 geo projection package, we rendered map layers as PNG images based on geographic data. To make this process flexible and better to handle, we wrote a node.js script that bundles all necessary parts and packages. The script uses one or more data sets (in the GeoJSON format) in addition to a config file. It outputs a PNG image using the library node-canvas. The config file defines the desired style, dimensions and projection of the layer. Based on this approach, we produced a set of map layers that we later merged in a graphic software.

That script (“render-map-layer”) is part of “Haacker”, a small library named after the German cartographer Hermann Haack. It contains all scripts that we used during this project. You can find a detailed documentation of the usage on GitHub.

Data Sources

We aimed to use data sets that are available under an open source license and come with a high geographic resolution and accuracy. While many data sets are available from different providers online, finding those that match these criteria was rather difficult.

QGIS was a big help in comparing possible data sets and identifying the suitable ones. In some cases, it also enabled us to modify the data sets to our needs or to remove some occurring glitches. Finally, we could simply export GeoJSON files from QGIS in order to render them.

We mostly used data sets from two sources: Natural Earth and ETOPO1. However, their data quality or availability was not satisfying for all our desired map layers. We therefore relied on a few additional data sources to fill these gaps. We will point them out in the individual layer sections.

Natural Earth

A great source for high quality data sets is Natural Earth, a collaboration project of many volunteer members of the North American Cartographic Information Society (NACIS) and cartographers from around the globe. It offers numerous sets of cultural, physical and raster data in different scales and is a great starting point on the search for data sets.

ETOPO1

To color the Earth’s surface based on its elevation and to render hillshades from the Earth’s mountains, we needed a set of layers that contain height-based information. The go-to source for such relief-based data is ETOPO1. This relief model is based on Shuttle Radar Topography Mission (SRTM) data and available both for land topography and ocean bathymetry. The data comes as one big GeoTIFF file that contains information about the height of the earths surface or the depth of its sea floor, covering the whole planet.

To make this data set usable for our process, we had to slice it based on elevation levels. Haacker contains a script (“process-etopo1-data”) that helped us with that task. Using a given elevation level range and desired vertical resolution, it achieves the following steps:

  1. generate a GeoTIFF file for each height level based on the ETOPO1 file
  2. transform that into a Shapefile
  3. transform the Shapefile into a GeoJSON file

We decided to use a vertical resolution of 20 meters for the elevation levels from 10,000 meters below to 9,000 meters above sea level. This results in 951 levels and files.

Map Layers

The map consists of several layers that were rendered independently and later merged together to a single TIFF file. For convenience, we used Photoshop for the merging process. Nonetheless, it would be perfectly possible to use an open source alternative such as GIMP to achieve the same result.

The final map features layers for bathymetry, land area, rivers and lakes, deltas, snow and ice and Antarctic ice shelfs. In addition, there are two hillshade layers and a layer of map labels.

1/7 — Basic bathymetry layer
1/7 — Bathymetry base layer
2/7 — Land surface
2/7 — Land surface
3/7 — Rivers and Lakes
3/7 — Rivers and lakes
4/7 — Deltas and shore fix
4/7 — Deltas and shore fix
5/7 — Snow, ice and Antarctic ice shelfs
5/7 — Snow, ice and Antarctic ice shelfs
6/7 — Hillshade
6/7 — Hillshade
7/7 — Labels
7/7 — Labels

Overall design

Satellite imagery has given humanity the chance to perceive Earth in all its entirety. NASA’s famous Blue Marble is a good example for such an impactful image. We wanted the map’s visual design to be inspired by this natural look of our planet.

Therefore, we stuck to an accurate representation of the natural colors for many of the map layers—like water or snow and ice. Nonetheless, the map should have a unique style that differentiates it from the look we are used to from common topographic maps. We consequently designed the land surface in a look that is inspired by, but not accurate to the natural colors or color schemes that traditional maps use. It was mainly influenced by the works of cartographers such as Eduard Imhof and uses a bi-chromatic color scheme.

Land & Bathymetry

We used the previously processed ETOPO1 data to render two layers:

  1. a land surface layer with all the levels above sea level
  2. a layer of the sea floor with all the levels below the sea level

Both layers were colored using a color gradient. To bring more details into flatter areas, we manipulated the mapping between height level and gradient with an easing function. That method allowed us to use a a wider range of colors on great, low plains and shallow seas.

The color gradient for the bathymetry reaches from a light but colorful, nearlyturquoise blue for thecoastal areasto a deep and dark blue for deep ridges.
The land surface starts with a dark and grayish blue along the coasts and develops to avery light brownishtone inthe high mountain ranges.

Bathymetry Gradient
Land Gradient

Rivers and Lakes

To render rivers and lakes, we used the GSHHG database. It contains several data sets of different features and resolutions. We combined several of these data sets into a single hydrologic layer. As a final touch, we added a gentle bevel effect in Photoshop to achieve a better visual appearance.

Amazon river
Amazon river
North America
North America

Deltas

The GSHHG data set misses data for many of the world’s major river deltas—like the Lena Delta or the Mackenzie Delta. That lead to some unwanted glitches: rivers ended in the countryside instead of flowing widely spread into the ocean. We were able to close that gap with data published by the Deltas at Risk project. This additional layer filled the gap between ocean and rivers and finalized the shape of water on the map. In some cases, we adjusted some glitches and gaps between the two data sets by hand in Photoshop.

Lena Delta without additional layer
Lena Delta with additional layer
Lena Delta without and with fix

Snow, Ice and Antarctic Ice Shelfs

Natural Earth provides a data set of the Earth’s Glaciated Areas that we rendered in white. To achieve a nice visual appearance, we added this layer twice, adjusted the opacity and used two different blend modes: Overlay and Screen.

For the Antarctic Ice Shelfs, we used another data set from Natural Earth and followed the same process.

Detail of the Greenland area
Detail of the Greenland area
Detail of Antarctica
Detail of Antarctica

Hillshades

Hillshades are a common cartographic technique to create a feeling for the Earth’s relief. They create an impression of depth and plasticity, making the viewer understand the terrain of a region.

As a basis, we used the previously processed ETOPO1 data set and created two separate image files for heights above and below the sea level. Like this, we would later end up with two separate hillshades for land and sea that then can be fine tuned independently. This time, the images were rendered in a black and white color scheme—black for the areas with a low and white for the ones with a high elevation.

Black and white images

Subsequently, we rendered hillshades from these images, following Daniel P. Huffman’s extraordinary tutorial on Blender. It took us several iterations and experiments to understand the impact of different settings on the resulting shade before we ended up with a good result.

Hillshades Land
Hillshades Land
Hillshades Sea
Hillshades Sea

The resulting hillshade layers were blended into to the feature layers using Photoshop. The impact of hillshades on the visual appearance of the map can be seen in this comparison.

Himalaya and South-East Asian Region: Impact of hillshades on the perception of the Earth’s relief
Himalaya and South-East Asian Region: Impact of hillshades on the perception of the Earth’s relief

Map Labels

The map’s uppermost layer is the one that reflects our human view on the globe. We often name places after famous explorers—like the name “America”, chosen by Martin Waldseemüller to honor Amerigo Vespucci on his famous map. Other (western) place names were chosen by adapting the traditional names (like Tokelau) or verbal misunderstandings (like Yucatán). When you browse through an atlas, you can discover those and more places—some of that you may never had heard of. So, map labels are fascinating and we added more than 1.000 of them to the map.

Typography

As Boris points out in his article, we did some explorations on typography before finally choosing two typefaces: Roemisch by the German Cartographic Design and the National by Klim Type Foundry.

Used fonts
Used fonts

The Roemisch is used for conveying geographic information, the National for cities.

Examples for the use of Typography in the map

Data Processing

Even if the moments of browsing through maps in an atlas are nice ones—we still did not want to copy each and every label by hand from an atlas. We therefore used two label data sets from Natural Earth (Populated Places and Physical Labels) and processed them for our needs.

Our process looked like this:

  1. Convert Natural Earth Shapefiles to GeoJSON files
  2. Render the GeoJSON files as SVG using the label-generation script included in Haacker
  3. Place the labels on the map using Affinity Designer

We noticed that some of the place names were not consistent or correct by typographical standards. We therefore tried to check and—if necessary—correct those by hand.

Placement

The label data sets provide information about the placement of each label—either as a point or geographic area. This works well for cities, which we represent as points on our map: we could just render a circle next to the label on the designated position of a city in the SVG. But for geographical regions, the task is more complex. As we wanted to place the map labels for regions smoothly inside of their area, we had to create a bezier curve for every single label.

First, we calculated the centerline of each area feature. The Python library label_centerlines proved to be useful for that task. We embedded it in a little script (“render-map-labels”) that is part of Haacker and generated SVG files that contain the centerlines and the related labels fitting for our map. Unfortunately, that placement was still pretty rough: the lines consisted of dozens or hundreds of points and did not have the smooth appearance of a bezier curve. In consequence, we only used these lines only as an orientation and drew individual bezier curves for the most labels we used.

Example for the label placement: centerline (blue), bezier curve (orange) and final label
Example for the label placement: centerline (blue), bezier curve (orange) and final label

As it is visible in this example, we often took the freedom to place labels divergently from their natural centerline. Like this, we achieved a clearer visual result and prevented overlaps with adjacent labels.

Merging map and labels

We used Affinity Designer to lay out the labels on the raw map that we exported from Photoshop. Again, we used this (proprietary) software mostly out of convenience—it would be possible to achieve the same result using open source software. Nonetheless, Affinity Designer proved to be useful for our work based on a number of reasons:

  1. It supports huge artboards in the map’s size
  2. The handling and editing of bezier curves and the text placement works pretty easy and reliable
  3. It runs stable and fast, even for big files

Print process

The map was printed an aluminium composite panel and later laser cutted using a vector outline. To prevent the occurrence of white artefacts along the edges, we generated some random geography around the actual map using Photoshops content-aware filling.

The map with generated geographies, the cut area highlighted in red
The map with generated geographies, the cut area highlighted in red

Result

The map finally found its home inside of the University of Applied Sciences Potsdam’s Urban Complexity Lab.

Download

A version of the map with a reduced resolution is available for download. It comes in a PDF file (25 MB) and is suitable for prints in an A2 format (594 × 420 mm).

Download the map

Sources & Tools

Datasets

  1. Antarctic Ice Shelfs by Natural Earth. Released under public domain.
  2. Delta Maps by Z.D. Tessler, C.J. Vörösmarty, M. Grossberg, I. Gladkova, H. Aizenman, J.P.M. Syvitski and E. Foufoula-Georgiou. The data was published in the scope of their research paper “Profiling Risk and Sustainability in Coastal Deltas of the World”.
  3. ETOPO1 1 Arc-Minute Global Relief Model by Christopher Amante and Barry W. Eakins of the National Geophysical Data Center, NOAA. 2009. Released under public domain.
  4. Glaciated Areas by Natural Earth. Released under public domain.
  5. GSHHG dataset by Paul Wessel (SOEST, University of Hawai'i) and Walter H. F. Smith, (NOAA Geosciences Lab). Released under the GNU Lesser General Public License.
  6. Populated Places by Natural Earth. Released under public domain.
  7. Physical Labels by Natural Earth. Released under public domain.

Applications

  1. Adobe Photoshop
  2. Affinity Designer
  3. Blender
  4. QGIS

Selected software packages

  1. D3
  2. D3 geo projections
  3. node.js
  4. node-canvas
  5. Python label centerlines library