Saturday, July 18, 2015

Where's Voldemort?

CartoCSS in Mapbox Studio includes a handy option to replace town names on your map with any text of your choice. I thought that I could use this option to change some random towns on my Harry Potter themed map with names used in J.K. Rowling's series of novels. For example,
[name_en='Bracknell'] {
    text-name: '"Little Whinging"';
turns the name of the town of Bracknell in England to 'Little Whinging'.

It then occurred to me that I could use this function to add textual clues to the map and create a little treasure hunt. For example,
[name_en='Alnwick'] {
    text-name: '"Hogwarts (search in Budleigh Salterton)"';
changes the town name of Alnwick to 'Hogwarts' and also provides a clue to the map user that they should search in 'Budleigh Salterton'.

By adding a number of textual clues to my Harry Potter themed map I have been able to create a little Where's Voldemort map. Follow the clues on the map and you can help Harry Potter find the location of 'he who can't be named'.

The clues are very easy (to be honest they aren't really clues at all but simple instructions). When I get some time I might try to think up some riddles to solve in order to make this treasure hunt a little harder. For now the map can be viewed as an example of how you can create a map treasure hunt game using Mapbox Studio.

My Harry Potter themed map style is almost completely copied from Mapbox's new Lord of the Rings map style. All I've really changed is the map font and town shields (switched from the 'one ring' to a wizard's hat).

I've also added a number of map markers to the map, which show some of the UK locations used in the Harry Potter series of films. I tweaked the Leaflet.js css style a little on the map to provide a transparent border around the marker pop-ups. In my imagination this equates to Harry Potter's cloak of invisibility.

No comments: