I put together a map for National Geographic!

NG came to DevelopmentSeed with a project called Find Your Park, Love Your Park, part of the Yellow Rectangle’s celebration of the National Park’s centennial. The idea was that folks could locate a park and make a pledge to do something nice for it.

It was fun to put together, and highlighted a lot of the limitations of Mapbox Studio Classic & OpenStreetMap.

What was super exciting about this opportunity was that it was something new for NG. They have design nailed down when it comes to beautiful small scale maps World view; A map scale that shows a relatively large area on the ground with a low level of detail. but they don’t really have a standard for the large scale maps City/street view; A map scale that shows a small area on the ground at a high level of detail. This meant I had a lot of relative freedom in what that would look like, and how to scale it down from the distinctive style NG is so well known for.

The goal was to show every park in the United States, and make the distinction between National & local parks. To ensure the map didn’t look like a jumbled mess of green polygons, we knew early on we’d need the parks to come slowly depending on how far the user was zoomed in.

There are a few options for styling a basemap, but I went with Mapbox Studio Classic.

Mapbox Studio takes data from OpenStreetMap and lets us style it using CartoCSS.

Let’s unpack that.

OpenStreetMap is a wikipedia-style dataset of the world. Anyone can contribute and anyone can use the data from it.

Included in the dataset is

everything geographic Roads, rivers, boundaries, buildings, parks, etc. Anything you can map could (and likely is) be part of OSM. of which a lot has metadata for place names, type, function, or use. Because anyone can edit it, this metadata is an absolute mess, but it’s there all out in the open to parse through.

Mapbox hosts a filter of OSM data on their own servers. This means we don’t need to wrangle with the original massive dataset 617 GB uncompressed! saving us much time and many headaches. Bless their hearts .

Through their Studio service, we can then target those OSM elements with CartoCSS. That is, we can say something like: #roads{ stroke-color: red } and all elements in the dataset that are tagged as ‘roads’ will be colored red. It’s rad.

I decided to start the project from the ‘known’ small-scale view. National Geographic’s style has a few qualities:

• Pseudo-realistic terrain color
• Subtle elevation on land & bathymetry for water
• Densely labeled with their stock of fonts

Almost all Mapbox maps are based on vector data, which leads to a nice but discrete terrain shading. They have a Land cover data layer that lets you style separately woods, scrub, grass, crops, & snow- but I wanted to have something more continuous and smooth.

To achieve the continuous look, I turned primarily to their satellite & hillshade data layers. The hillshade layers worked to help punch out the elevation data, while the satellite layer at a low opacity helped mask the discrete borders and give it a much more realistic tone.

The satellite layer is very saturated & dynamic. Much to strong for my purposes. Following an example AJ Ashton AJ is the lead Cartographer at Mapbox. He does really cool stuff, and was nice enough to lend some advice while I worked on this. Thanks! did in the style Satellite Afternoon You can view this style on Github, or pop check it out in Mapbox Studio Classic from the default list they provide. , I used their image-filter to achieve a natural look.

One downside to this method is that it requires the satellite image to be layered over with a multiply composite. This makes the white areas see-thru, and we end up with weird looking cold places. One solution is to simply use the MB land cover layer to target areas with the snow tag, but…

Even then it’s not perfect. With some more GIS work the water layer could be made to match up with the snow area to cover it up. However, this map was only meant to show the United States… so we could just bound the map’s view to non-arctic areas and deal with this at a later time.

For the large scale there was a lot of freedom, but there was a looming restriction in that it needed to fluidly flow from top down. Initially I had hoped to have the satellite kick in to full as the user zooms in, but tests with that proved really awkward. Satellite imagery is a ‘all there or barely noticeable’ kind of feature. Because I was using it so lightly initially, to shift to a full view would require large steps with the between zoom layers in both color & opacity.

From testing out a few options, just having the sat imagery stay faint as we zoomed in seemed to be the better alternative. From that point, I made a pleasant simple view at the lower levels of warm brown roads with a light green tinted satellite base layer beneath it.

Another option would have been to show OSM data for buildings. We decided against that due to the fact that OSM is very incomplete for buildings, and it would be worthless for smaller towns.

To achieve the fade out of the terrain layers, the flat layer above the satellite imagery gets stronger in opacity as the user zooms in. To help the color flatten, the sat imagery also gets completely desaturated. There are still a few jumps zooming in where the color difference shifts from the yellowish-green to a more aqua-green, but overall the experience is fluid enough where I don’t believe that’ll stick out.

Another hefty portion of this project was the data wrangling side of things. Essentially, OSM metadata is a mess, and styling National Parks different from regular parks is an enormous pain. How did we get around that? Why we did our own extract on OSM pulling out the data for every single park in America. Oh boy!

That process and frustration will be saved for another blog post.

Cheers!