Widget HTML Atas

The Marauders Map


I was watching Harry Potter in addition to the Prisoner of Azkaban final nighttime in addition to it occurred to me that I withal haven't seen a expert interactive version of the Marauders Map. I had a couplet of hours costless this morn in addition to thus I decided to hand it a go.

I'm non solely happy alongside my Marauders Map but I idea I'd portion it whatever way. I styled OpenStreetMap map tiles using Mapbox Studio. Looking at images online of the Marauders Map used inwards the Harry Potter films it seems to me that the map basically contains only identify labels in addition to edifice footprints.

So my Marauders Maps too has edifice footprints in addition to map labels, colored every bit unopen to the master copy every bit possible. I too changed the label font to something which I idea looked suitably wizardry.

To animate a marking on the map I used the Leaflet.AnimatedMarker plugin. For the footprint marking I used an icon from the Map Icons Collection. If I teach a fiddling fourth dimension I'll update the marking to include ii feet (at the 2d I seem to move tracking a 1 legged wizard, hopping only about London).

The map isn't great. I require to refine the styling a fiddling to a greater extent than in addition to amend the map icon. It would too move overnice to function on the animated marking in addition to thus that the marking rotates to human face upward the administration of movement.