Case Study: Monty’s World

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!)
The website is built on the Google Maps API, a set of Javascript tools for accessing and using Google’s epic collection of topographical data. A lot of the functionality comes built in to Google Maps, scrolling, zooming, adding location markers and associated pop-up information, and there is an awful lot of flexibility on how these are used. I chose to maximise the screen-space given to the map by allowing the map to fill the entire browser window, and using an overlay for the menu. Google Street View can also be embedded, though it is up to you to work out how to integrate this. I opted to ape how street view appears on the Google Maps website itself, with a half-screen window which appears from the bottom of the screen.
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!
I opted to store all the data for the different location as pure Javascript rather than relying on a server-side database as I wanted to keep everything running on the client-side to minimise calls to the server and keep the whole website running super-fast in modern browsers. This also means the whole website is highly portable, comprising only a single .html file, a .css file and two .js files. This works well for the relatively small number of location used (currently around 50), but as I continue to add a larger number of locations I am considering adding a PHP & MySQL backend to store and manage the locations. I am also considering integrating the map into WordPress (which we use for the main podcast website), using WordPress’s custom fields to store the location data required.
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!