The Marauder's Map - Adding Labels

The Marauder's Map is my latest pet project. It is actually simply an excuse to play amongst Mapbox Studio. I decided that if I was going to acquire how to blueprint maps with Mapbox Studio and CartoCSS so a Harry Potter themed map was every bit skillful a projection every bit 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 in addition to 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 exclusively include these ii basic layers but I idea my map looked a piffling strange without roads so I decided to add together to a greater extent than or less sparse white primary 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 to a greater extent than or less Harry Potter themed labels to the map. To starting fourth dimension amongst I decided to switch out town in addition to metropolis names amongst either 'Wizards', Muggles', 'Squibs' or Mudbloods. Luckily Mapbox Studio allows you lot to supersede the existent names of towns in addition to city's amongst whatever text. So all I necessitate to produce was supersede the identify names of all cities, towns, villages in addition to neighborhoods amongst ane of my iv 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 amongst to a greater extent than Harry Potter themed labels I decided to produce something like amongst a release of other Points of Information on the map. I hence 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' in addition to 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 bear on adding to a greater extent than Harry Potter themed labels for other Points of Information but I mean value this would halt upward making the map a piffling besides crowded.

To avoid this overcrowding it is possible to define the zoom levels at which labels appear. You tin reach notice meet to a higher identify how the 'Muggles' identify mention for cities disappear from the map every bit you lot zoom-in by zoom score fifteen on the map ( [type='city'][zoom<=15]). I added a like zoom score for to a greater extent than or less of the other labels so that they exclusively appear at dissimilar zoom levels e.g. bars (Hog's Head) volition exclusively appear at zoom score xvi in addition to higher (zoom>=16).