How to Make a Beautiful Map

We love maps. So Fabian Ehmel and I made a beautiful butterfly world map just using open source tools and public data.

There is something weird and wonderful about analogue maps. They are increasingly useless yet incredibly beautiful. The obsessive level of detail of Ordnance Survey Maps, the typographic excellence of Swiss National Maps, the visual density of the Ebstorfer Weltkarte or the beautiful relief representations by Eduard Imhof. Old maritime maps smelling of the sea, uncharted areas, treasure maps, here be dragons. As a kid, I spend hours browsing maps and atlantes, imagining distant and secluded places. Maps evoke Wanderlust and Fernweh.

I always wanted to design my own maps. But it seemed difficult and trivial at the same time. There are already so many great maps and map styles out there — why go through all the trouble to create a variation of an existing one?

Then I discovered the Waterman Butterfly projection. And I was in love.

Butterfly Projections

All map designs face an interesting challenge: how do you turn the surface of a three-dimensional sphere into a two-dimensional plane? It is geometrically impossible to transform a globe into a flat rectangle while keeping all the spatial properties of the sphere’s surface. So every 2D map is necessarily a compromise.

There are numerous ways to translate the topography of Earth to a flat surface. They are called map projections. And while they all solve the basic challenge, they all distort the surface of the earth.

Every map projection has specific strengths and weaknesses. Some are good with angles, others with areas. But with every benefit comes a disadvantage. It is impossible for a map to maintain all aspects of earth’s surface. You can’t have true angles and true areas. You have to make a choice and a preference. As XKCD pointed out, map projections tell a lot about someone.

One of the most popular map projections is Mercator. In a way it is the default map projection and it is heavily used in magazines, school books and newspapers. This is regrettable as its merits are not relevant for most users and its flaws have a tremendous impact on how we imagine the world.

Mercator maps provide us with true angles. This is highly beneficial for navigation on sea as you can use the map to plot a course using a compass. But the drawback is that the areas are heavily distorted — especially towards the poles. Antarctica is usually cut out of the maps as it would be too huge to believe. If you draw a circle with a circumference of one Meter around the South Pole, this circle would have the same length as the equator. Mercator maps distort the size of the land masses towards the poles, thus creating completely wrong ideas about the size of the continents.

As said above: all map projections are neccessarily a distortion of the globe. There are a lot of different map projections and they all follow different strategies. Some try to truthfully represent areas, other distances or angles.

You have probably guessed — my favourite map projection is the Butterfly. Its core idea is to divide the Earth into eight octants. An octant is an eights of a solid — in this case a sphere. Each octant can then be “flattened” and arranged into a unified area.

“Experiment with an orange.” Visualisation of octants from Cahill‘s paper

The Butterfly projection was first proposed by Bernard J. S. Cahill in his seminal paper “An Account Of A New Land Map Of The World” published in 1909 in The Scottish Geographical Magazine. The above illustration of the octants is taken from this publication. Cahill never uses the term “butterfly” in the paper — but the name obviously fits the layout very well!

“Map with four lobes” by Bernard J. S. Cahill

In the 1990s, Steve Waterman took Cahill’s ideas and developed them further. His approach is based on the close-packing of spheres (Waterman Polyhedra) and provides cartographers with a more formalised mathematical model for the butterfly projection.

The Butterfly projection is — in the best sense of the word — a compromise projection. Mercator preserves angles (locally), Hobo-Dyer preserves areas (but distorting shapes). Waterman Butterfly does neither, but it is very good at preserving the overall shape of the continents. Not only the layout of the octants looks great, each part of the world resembles the way it looks on a globe.

The Butterfly projection is not only a beautiful graphical composition, it is also a truthful representation of the earth. My only gripe with the projection is that I feel a bit sorry for New Zealand. (But at least NZ is on our map…)

Tech and Tools

It was clear that I could not do this project on my own. My coding days are over and while I had a rough idea how to start the whole thing, I was clearly not capable to do it on my own. Luckily, I have great students! Fabian Ehmel did a degree in Geography before he joined the Interface Design programme and he was immediately excited about the project! So we teamed up and started working.

Right from the beginning, we were planning to design and develop our map by just using publicly available data and open source software. Fabian has documented his process in great detail on our project page.

But there is one aspect of the process that I find particularly interesting: most of the map was created using web technologies. Almost all layers were rendered as canvas elements in the browser. Who would have thought that you can use browsers as rendering engines for high-resolution maps?

In order to achieve this, Fabian developed a node.js library called Haacker that imports GeoJSON files and renders map layers as PNGs. This library was essential for achieving the high visual quality of our final map.

For convenience and for aesthetic reasons, we sometimes used commercial software and typefaces. But essentially, it is possible to create beautiful maps by just using open source tools and open data.

Fabian has created a detailed documentation of the entire process. If you are keen on creating your own maps you can follow the guide! (How about the Dymaxion projection?)

Technical Guide to Creating a Butterfly Map

Depth and Data

A map projection is just a mathematical concept for geographical data. In order to create a real map, we had to fill the empty canvas of our butterfly projection with seas, islands, continents, cities, rivers and mountains.

There are a number of online sources for cartographic datasets. One of the best — and the one we chose for our map — is Natural Earth. The site is the result of an intense and productive collaboration of many cartographers from all over the world. The data on Natural Earth is in the public domain, is available in several different scales and has a great integration of both vector and raster data. Natural Earth offers numerous datasets, and we used it for the majority of our map layers.

A particular challenge was the visual representation of the elevation layer — both for mountains and sea depth. For this, we used the ETOPO1 1 Arc-Minute Global Relief Model by Christopher Amante and Barry W. Eakins of the National Geophysical Data Center. Fabian came up with a way to slice the GeoTIFF from ETOP01 and generate GeoJSON for each elevation level. We decided to work with a vertical resolution of 20 meters. The elevation of Earth ranges from -10,000 to +9,000 meters. So we had to generate 951 elevation levels. Stacking these levels enabled us to create an elevation-based colour scheme and a detailed relief structure of the Earth’s surface.

While coloured elevation levels give you an idea of the position and distribution of mountains and ocean ridges, they still seem flat. There is no real feeling of depth and three-dimensionality. A common cartographic technique for creating a convincing representation of mountains and ridges is to add hillshades.

In order to create hillshades for our map, we followed Daniel Huffmann’s excellent tutorial using Blender. The result was a detailed and impressive rendition of the Earth’s surface.

Typography

I am a typography nerd, so finding the right typefaces and choosing the right typography was an important part of the map design.

One of our main sources of typographic inspiration were the maps from Swisstopo. They are very beautiful and make great use of typography.

Typography of Swisstopo maps

The most prominent typeface is a family of serifs called LK-Römisch — sometimes also called Landestopografie-Römisch. The typeface is exclusively used by the Swiss Federal Office of Topography so it is not commercially available. At least they have published a short guide to Swiss maps with typographic examples. (Thanks to Frank Rausch and Florian Hardwig for the typespotting support!)

After some explorations and iterations, we opted for the Roemisch by the German Cartographic Design and the National by Klim Type Foundry. The Roemisch is used for conveying geographic information, the National for cities.

Detail of our world map. Note the different typographic styles.

The chosen typography is clear and legible. But it also conveys a sense of elegance and refers to quintessential principles of map design.

However, the fonts we have used are not open source or free software. So the question is: what are good alternatives to Roemisch and National? There is actually only one typeface that comes to mind: the IBM Plex family. It is available as Sans, Serif, Mono and Condensed. It supports 100+ languages, it is extremely versatile and — above all — very beautiful.

IBM Plex Serif, Extralight Italic and Sans Regular

So why not use it in the first place? Well — it does not have the same mappiness as the Roemisch. But if you want to make your own maps without investing into commercial typefaces, I strongly suggest to use IBM Plex.

Production

The Butterfly projection is a visually amazing shape. It is both simple and complex. It is symmetric and suggestive. In a way it works like an optical illusion. You are looking at a two-dimensional plane — but at the same time, the overall composition provokes you to imagine a three-dimensional globe. No rectangular map can achieve that.

In order to reinforce this impression, we decided to isolate and emphasise the map shape. So the map was printed on aluminium and the butterfly shape was cut out. The result is a map-object and not only a map-surface.

Furthermore, we wanted to have a big map. As described by Fabian, he was able to render an image with a dimension of 31,000 × 18,000 pixels. This allowed us to print a high-quality map with a dimension of 254 x 142,5 cm! Which is big. And a beautiful addition to our lab space!

The butterfly map is now on permanent display at the Urban Complexity Lab in Potsdam!

Final Words

Designing a world map was delightful! And it is quite remarkable that the design and production of a highly detailed map can be done using just public data and open software. If you are into maps: follow the guidelines and make your own!