Oct 16, 2015
Since 1915, the National Geographic Society has been making some of the best maps the world has ever seen. So we were honored, humbled, and maybe even a little nervous when we got the opportunity to work closely with the Nat Geo team designing and building an interactive feature all about the Amazon, launched yesterday.
Just how much history did we need to live up to? As it happens, Nat Geo marked the centennial of its map-making in January 2015 with this fine article, which gives us a cumulative snapshot:
At this writing (the count is obsolete as soon as it is tallied), National Geographic cartographers have produced 438 supplement maps, ten world atlases, dozens of globes, about 3,000 maps for the magazine, and many maps in digital form.
We were most definitely not starting from scratch. Indeed, we approached the project with a shared commitment to drawing as much as possible from Nat Geo’s print assets and tools and from Stamen’s history using open source web mapping tools to design with data.
As soon as we dug into the work, we discovered we were making a lot more than a map. Yes, the foldout print piece featured a detailed set of maps on one side, but it also showcased beautifully detailed illustrations of the three main types of forest in the Amazon, along with a dozen stand-alone renderings of species ranging from a harpy eagle to a jaguar (elements which some map nerds call the “epimap”). And it drew on a wide range of data that could be visualized in new ways on the web.
With such rich and diverse visual assets, Stamen designer Nicolette Hayes worked closely with National Geographic’s design team (especially Fernando Baptista and Vitomir Zarkovic, along with project lead Ryan Morris) to design an interface that could give both detailed context or a simple, clean overview.
Maps from Print to Web
We knew that the Nat Geo cartography team uses MAPublisher with Adobe Illustrator to make its print maps, painstakingly fine-tuning individual labels and line placements as one can do with print tools. That kind of control is possible with web tools, but it’s not easy.
We had a choice: Try to recreate the print map from scratch using pure web tools or find a middle way to reuse the work Nat Geo had done for print.
From the start, reuse made a lot more sense. We had two key challenges: Introducing zoom-dependent styling (especially for labels) and rendering a map in a projection other than Web Mercator. (Map nerd explanation: Almost all maps you see on the web are in Web Mercator, which fits well into the square grid of the web but distorts reality significantly. Almost all good print maps use some other projection that reduces distortion for the focus area and purpose of the map.)
Using techniques we first tried on this simple Ocean Planning map, we developed a deceptively simple method to solve the projection problem: Create all tiles in the same desired projection but then simply let the Leaflet mapping library we use treat them as if they were in Web Mercator. We call it “lying to Leaflet.” A little deception is a good thing in this case. (You can get a bit more detail in this slide deck.)
For zoom-dependent styling, the solution was essentially hand work between Stamen’s Alan McConchie and Nat Geo’s Virginia Mason and Debbie Gibbons, carefully increasing label size and decreasing density and making other tweaks until each zoom looked just right.
Artworks as Maps
If the maps give you the lay of the land, the illustrations bring you into the heart of the forest, taking the flat map plane and turning it vertical, where so much of rainforest diversity comes to life.
We debated for a brief period about how to make sure that the illustrations got equal footing with the map. At first, there didn’t seem to be an obvious pattern to follow. But it turned out the answer was simple: treat the drawings like maps.
So we took the high-resolution source files and turned them into zoomable and pannable images. Just like a map, you can zoom out for an overview or zoom in to see intricate details and reveal labels on the various animals in the scene.
Context and Change Over Time
The maps and artwork give us a full spatial picture of the Amazon, but we also wanted to show change over time.
For the cyclical flooding that occurs each year, Nat Geo’s Fernando Baptista animated the waters rising to attract a whole different set of inhabitants. For the more sobering changes of fire and deforestation, the Stamen team created two animations from data provided by the Nat Geo editorial team, rendering individual frames in TileMill and pulling them together in Adobe After Effects. These show regional fires on the left and a zoomed-in view of deforestation on the right:
Oh, and en tres idiomas
The project is being published in English, Portuguese, and Spanish (the latter two launching soon). Stamen’s director of technology Seth Fitzsimmons and project director Dan Rademacher worked with Nat Geo’s translators and our technology partners at Presence PG to build the site in a way that made it simple to swap out not just text but also images and map layers that included either words or units (to switch between imperial and metric).