Back to

Building a better kiosk with GIS and HTML5

A possibly little known fact about IMA Lab is that we also develop applications and websites for other museums. Recently we were approached by the Atlanta History Center to build an interactive war map kiosk for an exhibition entitled “War In Our Backyards.” The Atlanta History Center has gathered an immense amount of data about the civil war battles in the Atlanta area and they wanted to convey this information onto a map so that visitors could see what took place right in their neighborhoods.

Not only did this exhibit involve a series of touch screen kiosks, but also needed to include a large version of the map that would be projected from the ceiling onto a table in the middle of the exhibit. Many ideas had been tossed around for the best way to approach this unique kiosk design. The approach we eventually decided on was to build a single interface that could accommodate both the projection and the touch screen displays. The screen shot below depicts the final interface design.

Working with projectors

Projecting the map onto a circular table provided an entirely new set of challenges. To accommodate this we came up with a two step approach.  For the interface itself we leveraged features of HTML5 to create a circular overlay of the Google map and the data overlays. The second problem was the projector itself. In order to perfectly project our circular map, a physical mask was needed to effectively block out the rest of the interface that did not need to be displayed onto the table.

Populating the Map

The Atlanta History Center provided geographical data that was out of this world. Not only had they plotted out all of the civil war battles in the Atlanta area, but the data also included detailed information on who and what was destroyed in Atlanta during the civil war. Much of this information has never been presented to the public at large.

To plot the data onto our Google map, two open source projects were utilized.  All of the data is stored in a format called “shapefiles”. The shapefiles are stored and managed by a custom module we developed for the Drupal content management system. This module stores the data, and produces a dynamic configuration file for our tile server that tells it about the data that should be presented.

Getting this data to a Google map requires the implementation of a tile server. In a nutshell, the tile server takes the shapefiles and turns them into standard images that can be added as an overlay to a Google map. For this task, it was Mapnik to the rescue. Mapnik is essentially a toolkit for working with geographic information systems (GIS) data and functions as a tile server for our kiosk.

The Map Interface

To the left of the map, a map legend is provided. This allows visitors to distinguish battle lines, defense lines, attack movement, areas that were destroyed and so on. The top right side of the interface provides a few choices so that visitors can toggle between features of google maps such as hiding or showing streets, as well as switching from street, satellite, and terrain style maps. Below this is a “Map Features” menu, that provides buttons for the 5 major civil war battles in the area, as well as downtown Atlanta in 1864. By simply tapping any of these buttons on the touch screen display, a visitor will be centered in on the area they chose, and presented with dialog about the battle they have selected.


The development of this kiosk provided many new challenges and allowed us to break into new and cutting-edge technologies. By leveraging these technologies, museum visitors are provided with an informative and new way to interact with an import part of Atlanta history, which might be right in their own backyard.

Filed under: New Media, Technology

Comments are closed.