Web Page – tuftsmaraudersmap.github.io

In order to provide and easy user interface for the marauder’s map, we decided to construct a static web page that could be accessed from any computer. It was easiest to use Github to host this web page. The design of the site was simple, but a few key functions were desired:

  1. An introduction page which featured a spoken password interface which, when the correct password was spoken, the actual map interface would load automatically.
  2. The ability to skip the spoken word feature if desired.
  3. The map would feature different icons corresponding to locations on Tuft’s campus that may be relevant to students. The icons, when clicked, will display more information relative to the place they mark on the map.
  4. The information will be drawn from a database server called Thingworx, which is an IoT platform that makes persistent, easily accessible data storage easy to implement.

In 2015, Google Chrome introduced a built in speech recognition API that makes speech recognition on a web page easy. This API was used to gather speech from the user’s microphone. The API returns a textual string based on how it analyzes the audio file. Comparing this textual string to a number of variants of the password causes the page to redirect to the map window. The user interface for this functionality is simple. The user presses “start” to begin recording from their local microphone, and as soon as the password is spoken, the page redirects. The page also features an option to skip the voice recognition portion of the page.

The introduction page to the marauder's map website

The introduction page to the marauder’s map website

After the page redirects, a simple map is displayed. This site uses the Google Maps Javascript API to display the map and place icons/information on the map. The information for the different icons on the map comes from a single Thingworx “Thing.” Thingworx things can contain a number of different “Properties.” These properties are essentially variables which hold information. The different information feeders to this site (Dining hall menus, sports events, empty classrooms) are all stored in different properties. These properties are JavaScript object notation strings, which are structured in such a way that the back-end JavaScript code of the website can easily parse and organize into human-readable blocks of information to be displayed on the map.

Most of the properties in the database contain a “location” element which the map uses to place an icon on the map. The icon can be clicked to reveal additional information pertinent to the location on the map. The three images below detail these basic features. Students can use the information, which is updated in real time, in their daily lives at tufts. While this information is available from many different Tufts websites, the marauder’s map brings it all into one, map based interface which makes the information easily accessible and thus more useful to students.

In addition to the basic functionality discussed above, the map also includes some other added features to enhance the user experience. The use of internet “cookies” forces the user to go through introduction page to access the map. This ensures that the student has at least viewed the spoken password functionality of the map. Also, to increase the map’s likeness to the original Harry Potter version, saying the words “Mischief Managed” while the map is open will revert the page back to the introduction page, thus hiding the map’s information from prying eyes. Also, every piece of information on the map updates in real time, so changes to the dining hall menu, the Joey schedule, and the locations of people using the marauder’s app, are easily visible to users.