Exploding Menu enables high precision selection of geo-located markers on multitouch interfaces.
In a geo-visualization, in which the visual scatter shall show spatial patterns, places must be displayed at their original geo-locations. In contrast to non-geographic layout strategies, where a positioning algorithm can prevent occlusions, this may result in overlapping markers for places in close proximity.
However, precise selection of small or overlapping markers is difficult due to the “fat finger problem” [Remy 2010]. Thus, we designed Exploding Menu, a mechanism to ease the selection of near-by markers.
In the beginning, multiple overlapping markers are shown on a map (Fig. 1a). When a user touches the marker cluster, a radial menu appears with all the markers evenly laid out on a concentric ring (Fig. 1b). The user can slide (or tap with a second finger) onto the markers, which will be highlighted (Fig. 1c). When the user has chosen one marker and releases his finger, the corresponding place is selected (Fig. 1d).
To select another marker of the same cluster, the interaction pattern has to be repeated. The same mechanism can be used to deselect markers.
[Remy 2010] Remy, C., Weiss, M., Ziefle, M., Borchers, J. 2010. A Pattern Language for Interaction Tabletops in Collaborative Workspaces. EuroPLoP 2010.
We implemented an Exploding Menu for the Muse application. Here, all markers represent research institutions with their number of publications mapped to the size of the marker.
In the above example, multiple markers are shown on the south of Great Britain with various sizes (Fig. 2a). The user taps on the marker cluster, and a radial menu is displayed with a black transparent circle, darkening the background map and other markers (Fig. 2b). Note, that the marker proxies in the menu are shown in their original sizes. When the user slides over a marker, the title of the institution is displayed (Fig. 2c). After the user releases his finger, the radial menu disappears, and the selected marker is shown with all its connections (Fig. 2d).
Here you’ll find a sketch in Processing.js, which can be used as basis for your own application. It’s a simple reference implementation, and not multitouch capable, but the mouse interactions can easily be rewritten to work with TUIO or other events. Comment below, if you’d like to have further code examples.
Download the Exploding Menu Processing sketch.
Click on the marker cluster in the center, and then move over one of the markers in the radial menu.
In this example one marker is pre-selected, and all markers are shown in debug mode, i.e. both (original and exploded) positions are shown.