A short post looking at tweaking base maps for seasonality using Mapbox Studio & CartoCSS.

We’ve been duped in our web mapping bubble. While its nice to think about our maps as simply being a canvas for the data we want to visualize. In reality the mapping platform and indeed the base map itself are absolutey critical in setting the tone of a map. The talented team at Mapbox have been yelling this message from the rafters. Over the last few days I have had to opportunity to drink some of their Kool-Aid.

Folks, I’ll be going back for seconds.

My project was simple, a trail map for our local nordic ski centre. In essence a map by which we would be able to navigate the ever growing trail network. The Caledonia Nordic Ski Centre provides excellent singletrack trails in the summer and worldclass nordic ski trails in the winter. I was looking for a base map to satisfy both these activities. I knew that Mapbox had blogged recently about their outdoor tiles so I was curious.

Mapbox Outdoors

There is no doubt these are very pretty, and would be very suitable for the summer singletrack, but they really don’t have the visual connection to the ski trails. A skier knows that the primary linkage with their environment is, well, snow. These outdoor tiles are altogether too “brown” and I needed something altogether whiter. A brief look around brought me to Mapbox’s Winter Wonderland tiles. These tiles are as wonderful as promised.

Mapbox Winter Wonderland

Though both these base maps are equally as attractive seperately, but they don’t flow so well with each other. In this case its mainly about the trees. Around Otway’s ski trails there are a great deal of trees. It’s Canada, of course there are trees! The winter wonderland tiles are well endowed with trees, our task was simply to copy the tree representation of the Open Street Map landcover “wood” class from the winter wonderland tiles to the outdoors tiles.

In essence this means editing the outdoor tile’s CartoCSS in Mapbox Studio (and adding the images, wood_12.png & wood_18.png)

#landcover {
  [class='wood'] {
    [zoom>=4] { polygon-fill:lighten(@wood, 5); }
    [zoom>=8] {
      polygon-fill: lighten(@wood, 5);
      polygon-pattern-file: url(img/wood_12.png);
    [zoom>=17] {
      polygon-fill: lighten(@wood, 5);
      polygon-pattern-file: url(img/wood_18.png);
  [zoom>=4] {
    [class='scrub'] { polygon-fill: lighten(@scrub,26); }
    [class='grass'] { polygon-fill: @land; }
    [class='crop'] { polygon-fill: @land; }
    [class='snow'] { polygon-fill: @snow; }
    [class='grass'][zoom>=16] {
    [zoom>=14] { polygon-opacity: 0.8; }
    [zoom>=15] { polygon-opacity: 0.6; }
    [zoom>=16] { polygon-opacity: 0.4; }
    [zoom>=17] { polygon-opacity: 0.2; }

This was a surprisingly simple change and though Mapbox Studio is a complex interface, making these minor changes was a easy introduction to rolling my own base maps.

Amended Outdoor Tiles

The key here is considering the most effective method of communication for your map. Your base map can be altered in large or small ways to better align that communication. This way your tone can be more consistent, and your maps can look great.

Here are these basemaps in action

Sharing options
closeup photography of clear glass window closed

Observations • Darren Wiens

How to use SVG Filters on Web Maps

Here at Sparkgeo, while we often prefer to provide answers over visualizations, we still make a lot of web maps. And when we do, we take pride in…

blue coupe in front of pink house

Observations • Darren Wiens

Python-based Computer Vision in the Browser

Prototyping and Python are big parts of what I do at Sparkgeo, so when PyScript was announced at PyCon US 2022, I was all ears. PyScript, along with…

Observations • Gordon Logie

Wildfires and Flood Damage

A data-backed research project examining linkages between the wildfires and subsequent flood damages that occurred in BC, 2021.

Need a geospatial partner?

Our team complements organizations like yours—by providing on-tap access to geospatial, analytics, and mapping expertise.

Let’s talk

Join our team?

We’re always looking for skilled technologists to help us build the future of geospatial. Got a minute to find out more about us?

Working Here

Sharing options