I was watching Harry Potter and the Prisoner of Azkaban last night and it occurred to me that I still haven't seen a good interactive version of the Marauders Map. I had a couple of hours free this morning so I decided to give it a go.
I'm not entirely happy with my Marauders Map but I thought I'd share it any way. I styled OpenStreetMap map tiles using Mapbox Studio. Looking at images online of the Marauders Map used in the Harry Potter films it seems to me that the map basically contains just place labels and building footprints.
So my Marauders Maps also has building footprints and map labels, colored as close to the original as possible. I also changed the label font to something which I thought looked suitably wizardry.
To animate a marker on the map I used the Leaflet.AnimatedMarker plugin. For the footprint marker I used an icon from the Map Icons Collection. If I get a little time I'll update the marker to include two feet (at the moment I seem to be tracking a one legged wizard, hopping around London).
The map isn't great. I need to refine the styling a little more and improve the map icon. It would also be nice to work on the animated marker so that the marker rotates to face the direction of movement.
No comments:
Post a Comment