The Marauder's Map - Adding Labels

The Marauder's Map is my latest pet project. It is really just an excuse to play with Mapbox Studio. I decided that if I was going to learn how to design maps with Mapbox Studio and CartoCSS then a Harry Potter themed map was as good a project as any.

Images of the Marauder's Map used in the Harry Potter movies gave me the two basic colors used in the map for the map background and the building footprints. These are essentially the two layers that I started with.

They are defined in Mapbox Studio with:

Map {
  background-color: #cdad86;
}

#building {
 line-width: 1;
 line-color: #4d2a0f;
}

The map design in the Harry Potter movies seems to only include these two basic layers but I thought my map looked a little odd without roads so I decided to add some thin white main roads to my map.

#road {
   [class='main'] {
    ::case {
      line-width: 1;
      line-color: #fff;
    }
    ::fill {
      line-width: 1;
      line-color: #fff;
    }
  }
}

Next I really wanted to add some Harry Potter themed labels to the map. To start with I decided to switch out town and city names with either 'Wizards', Muggles', 'Squibs' or Mudbloods. Luckily Mapbox Studio allows you to replace the real names of towns and city's with any text. So all I need to do was replace the place names of all cities, towns, villages and neighborhoods with one of my four replacement words. So, for example, in my Marauder's Map all cities get re-labelled 'Muggles' ,

#place_label[localrank<=2] {
  [type='city'][zoom<=15] {
   text-name:  'Muggles';
    text-face-name: 'Gothic Ultra OT Regular';
    text-fill: #4d2a0f;
  }

To populate the map with more Harry Potter themed labels I decided to do something similar with a number of other Points of Information on the map. I therefore changed the names of all stations to 'Hogwarts Express', all schools to 'Hogwarts', all parks to 'Quidditch', all cafes to 'Luchino Caffe', all bars to 'Hog's Head' and all fast-food restaurants to 'Apothecary'. e.g.

#poi_label[maki='school'] {
  text-name: "'Hogwarts'";
  text-face-name: 'Gothic Ultra OT Regular';
  text-fill: #4d2a0f;
}

I could carry on adding more Harry Potter themed labels for other Points of Information but I think this would end up making the map a little too crowded.

To avoid this overcrowding it is possible to define the zoom levels at which labels appear. You can see above how the 'Muggles' place name for cities disappear from the map as you zoom-in past zoom level 15 on the map ( [type='city'][zoom<=15]). I added a similar zoom level for some of the other labels so that they only appear at different zoom levels e.g. bars (Hog's Head) will only appear at zoom level 16 and higher (zoom>=16).