The Marauder's Map - Adding Labels

The Marauder's Map is my latest pet project. It is actually only an excuse to play alongside Mapbox Studio. I decided that if I was going to larn how to blueprint maps with Mapbox Studio and CartoCSS too so a Harry Potter themed map was equally proficient a projection equally any.

Images of the Marauder's Map used inwards the Harry Potter movies gave me the ii basic colors used inwards the map for the map background too the edifice footprints. These are essentially the ii layers that I started with.

They are defined inwards Mapbox Studio with:

Map {
  background-color: #cdad86;
}

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

The map blueprint inwards the Harry Potter movies seems to solely include these ii basic layers but I idea my map looked a lilliputian strange without roads so I decided to add together roughly sparse white top dog roads to my map.

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

Next I actually wanted to add together roughly Harry Potter themed labels to the map. To offset alongside I decided to switch out town too metropolis names alongside either 'Wizards', Muggles', 'Squibs' or Mudbloods. Luckily Mapbox Studio allows y'all to supplant the existent names of towns too city's alongside whatsoever text. So all I quest to create was supplant the identify names of all cities, towns, villages too neighborhoods alongside ane of my 4 replacement words. So, for example, inwards my Marauder's Map all cities acquire 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 alongside to a greater extent than Harry Potter themed labels I decided to create something similar alongside a release of other Points of Information on the map. I so 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' too 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 acquit on adding to a greater extent than Harry Potter themed labels for other Points of Information but I intend this would terminate upwards making the map a lilliputian likewise crowded.

To avoid this overcrowding it is possible to define the zoom levels at which labels appear. You tin flame run across inwards a higher identify how the 'Muggles' identify advert for cities disappear from the map equally y'all zoom-in by zoom score fifteen on the map ( [type='city'][zoom<=15]). I added a similar zoom score for roughly of the other labels so that they solely appear at dissimilar zoom levels e.g. bars (Hog's Head) volition solely appear at zoom score xvi too higher (zoom>=16).