I’ve always loved maps. The room I’m sitting in right now has five maps hanging on the walls. This being the case, it should be no surprise that I love online map services like Google Maps and OpenStreetMap. I also love the ghost stories of M.R. James and over the summer I embarked on a project which combines the two!
Monty’s World is an interactive map of real-world locations which feature in M.R. James’s stories, as well as biographical locations from James’s life. The Monty’s World website accompanies ‘A Podcast to the Curious‘, the M.R. James podcast which I have co-hosted since summer 2011 (and which I fully intend to get around to writing about sooner or later!)
I used a bit of jQuery magic to animate the menus so that they take up as little space as possible, just dropping down when needed, and getting out of the way of the map when not needed. Originally the menu only listed the names of the locations, but after getting feedback from some of our podcast listeners I added the option to sort and browse the locations by the story they are related to, which required a little mathematical jiggery-pokery to ensure the map would zoom out sufficiently to show all the locations for a particular story on a single screen. I also added code to allow each map location to have a permalink, a URL which will centre the map on a particular location and open it’s information pop-up. I’ve found this very useful for promoting the website via social media!
Also on my to-do list is either create a dedicated mobile/tablet version of the website or make the website more responsive to suit smaller screens. Currently the map functions correctly on smaller screens, but the menus are too cumbersome on mobile and tablets due to the large amount of information stored in them. A lesson learned the hard way to always think mobile-first when starting a new project!