• The Labs Wiki Map is an internal, web-browser-based application that helps employees find conference rooms, kitchens, and other employees’ seats on an overhead map view of the building. It also, by nature of being a wiki, allows viewers to click to edit any entry - so the map is revised continuously by communal effort and remains up-to-date.

     
  • Major Features

    * Floorplan view of our Waltham office allows for quick lookups of people and locations using the internal URL http://map
    * Users can both view and edit entries for cubicles, offices, conference rooms, and other utility rooms.
    * Supports search-as-you-type and substring matching, for both names and office addresses.
    * Allows panning and zooming using the mouse and mouse wheel.
    * Provides the ability to construct URLs that link directly to search results. This is done by passing parameters into the applet as it initializes, e.g. http://map?query=boardroom
    * All user edits are non-destructive and can be rolled backwards and forwards in time by an administrator.


    Origin

    Constant Contact is a rapidly growing company, and as such tends to expand and reorganize its office space frequently. At the company headquarters in Waltham, MA, the average tenure of a particular person in a particular office or cube is less than six months - and with such a high frequency of intra-office moves, it can be tough to find people!

    HR and operations did (and continue to do) a great job of staying on top of the moves, office addresses, and ever-shifting conference room locations and names, but as the company’s headcount grew it became more and more time-intensive to find people and rooms. Labs decided to tackle this problem by producing what we call a “Wiki Map” - a floorplan that, like Wikipedia, can be both viewed and edited by anyone.


    Development

    Like the Live Site Traffic map and the Operations Video Wall, the Wiki Map is built using the Processing Java-based graphics programming environment. Unlike the other projects, though, the Wiki Map is accessed directly by end users as a Java applet embedded in a web page.

    The map image used for this originates from a large PDF, and converting it to a raster image format with enough detail to allow for zooming in to see individual offices required a master image of about 3000x3000px. There’s no way that’ll fit into memory, so we ended up writing a multi-LOD tile-rendering system that draws a low-res, 1024x1024 map when zoomed out, and selectively replaces that low-res map with high-res 512x512 tiles as the user zooms in and pans around. It was tricky to get right, but it’s worked well for our users and lets us reuse a pretty easy Photoshop slice-based template to make map updates.

    Java has worked out both well and poorly for this project - an embedded Java applet’s default security policy allows it to communicate with its host server, so we’re able to make live read/write updates to the wiki map by passing parameters between the applet instance in a viewer’s web browser and a LAMP stack on the host. Java applets also have nice cross-platform capabilities like mouse-wheel support (for zooming the map), good animation performance for panning and search-as-you-type, and pretty consistent cross-browser performance.

    There’s only one big downside to using an embedded Java applet, but it is indeed a big one: stability. Regardless of browser or OS, the Java VM seems to eventually run out of heap space and a user unfortunately needs to restart his or her browser to get the map working again. We’re thinking about moving this whole thing over to run natively in HTML5 using the <canvas> tag, but that’ll basically require redoing the whole thing, so it’s not on the near horizon.


    Deployment

    The Wiki Map lives on the internal Constant Contact LAN at http://map, and since launch has received broad support and attention from the company. Right now new employees’ machines are delivered with the Wiki Map as their default home page, and our Exchange address book has also been updated with Wiki Map links for our conference and utility rooms.


    Demo

    You can find a quick demo video of panning, zooming, and searching the wiki map on Youtube:

 

Wed love to hear from you!

Send us questions, comments, report bugs or get more information about our projects Click here to contact us.