Geo-Spatial Interaction Design
for Old Maps

Matthias Müller-Prove | v2, 1/2024 | v1, 2023

Old maps are precious and need to be handled with care by experienced librarians. Therefore digitizing old maps and other cultural heritage documents for sharing with the public is on the agenda of many organizations. However the user interfaces and interaction design models are not geared towards maps in specific and there is no common approach to browse items accross institutions. The web application Chronoscope World addresses theses issues by offering a powerful user interface to browse map collections of many openGLAM providers. A couple of useful interaction design concepts are presented that are rooted in 40 years of interaction design history.

• Human-centered computing~Interaction design • Information systems~Information retrieval~Users and interactive retrieval • Applied computing~Arts and humanities

Additional Keywords and Phrases: geo-interaction design, online maps, openGLAM, cultural computing, digital humanities

Introduction

Chronoscope World is a web-based maps service that offers access to 7,000 old maps. They are provided by 80 openGLAM institutions (galleries, libraries, archives and museums) under public domain or creative commons license. The maps have been geo-referenced and can therefore be displayed on their accurate geographic location. The data is also used for spatial search. In this case the current browser view becomes part of the search query to retrieve a list of appropriate maps sorted by the amount of overlap between map and browser view. The results are displayed as thumbnails on a table of maps. A click opens the map in full size and zooming-in reveals all the details and skills of the cartographer.

The user interface takes a minimalistic approach to leave as much space as possible for the content area. The tools are arranged along the window edges and adjust to different window dimensions. Even mobile use is supported – although small screens are not the best display option for this kind of content.

The paper presents a few interface and interaction design concepts of the Chronoscope World that have been proposed and evaluated by academic research, but that have rarely been adopted by today’s interface designers. Among these concepts are:

  1. Dynamic queries
  2. Mnemonic keyboard shortcuts
  3. Information architecture informed by semantical context
  4. Rooms concept
  5. (Smart) Drag ’n’ Drop

The origins and their application for Chronoscope World are discussed in the next section.
After that some other map tools are presented in comparison to Chronoscope World.


Chronoscope Demo (5 minutes)

Geo-Interaction Design Concepts

Dynamic Queries

All user interfaces for geo-spatial data face the same challenge: presenting a huge amount of data under limited screen real-estate. Visual design and high performance are key to usability and a positive user experience. Together they provide an environment in which Dynamic Queries [1] can be utilized successfully. Dynamic Queries have been introduced for HomeFinder in 1983 [2] to look for apartments in the area of Washington D.C.. Slider controls were used to interactively update a map with potential candidates based on search criteria such as number of bedrooms and distance to city center. A two-value slider control was implemented for FilmFinder in 1994 [3]. The user could set upper and lower time limits for a movie database.

Figure 1: Outline mode of Chronoscope World. It shows an old map of Italy and dashed boxes for all maps that have been created between 1730 and 1760. The box label is a handle to open any map.
ChronoLink: mprove.de/chrono?q=44.4381,12.34857&z=4.11&t=14&m=HK0351&d=1&c=l,y
Map of Italy: Creative Commons Zero via ifl.wissensbank.com/fastlink.html?search=179274000
Map of Ukraine: Public Domain

Chronoscope World’s outline mode shows the bounding boxes for all maps. However, the display can be pretty cluttered and confusing for 7,000 maps. The gestalt law figure-to-ground provides a good guidance to ease the problem. The night mode has been introduced to apply this principle: The world map on the background turns dark with very few labels and the map outlines are tinted from red to yellow; colors which have a high contrast on the dark black and blue background. Oldest maps are red, while younger maps are orange or yellow.

The idea of dynamic queries is adopted for the time slider control. Two thumb controls mark the oldest and newest year for the current map selection. The entire bar can be moved as well to analyze the data by century of decade. The time slider control is dynamic in the sense that it has an immediate effect on the set of maps that are displayed on the global map. Latency of display updates is short enough to provide the impression of a (timely) responsive user interface. This is the idea of dynamic queries. They foster engagement and exploration by the user.

A second slider control on the left side provides a dynamic filter for map scale.

Mnemonic Keyboard Shortcuts

Ironically keyboard shortcuts have been an important element of graphical user interfaces right from the beginning. The menu structures for the WIMP-desktop metaphor of Apple Lisa and Apple Macintosh and all the applications benefit from standards as presented in Macintosh Human Interface Guidelines [4]. For instance Cmd+F will trigger an appropriate find command for all applications. In the browser-based online world the desktop conventions do not apply anymore [5]. Here, pressing Cmd+F or Ctrl-F just triggers a full text search for the current web page instead of a desired side-wide search.

Chronoscope World reintroduces keyboard shortcuts for its interaction model. Pressing the F key (without a modifier key) finds the best matching maps as described above. The L key opens the out(L)ine mode. D switches between daylight and dark night mode. A opens an atlas, and so forth… Most of the toolbar commands have corresponding keyboard shortcuts which are derived from the command name. Therefore the key commands can fairly easy be memorized. Tooltips are used to inform the user about the mappings. Eventually the key commands turn into muscle memory and can be triggered without any noticeable mental effort.

Watch Chronoscope World Key Pagination

In addition, the letters can be appended to the URL. That means that a so-called ChronoLink can not only capture the currently displayed view coordinates and the old map, but also entail a couple of commands such as (P)in map, (W)alk to next map, open (A)tlas, turn on (S)atellte Mode, etc. For example, the ChronoLink of Figure 1 ends with the parameter c=l,y. The “l” opens the outline mode, “y” sets the time frame to plus/minus 10 years around the current map.

Historical and Semantical Contexts drive Information Architecture

Most of the web apps that offer access to old maps ignore inherent information on the maps. Maps have a history themselves: some information on the context is stored as metadata, like e.g. the name of the cartographer, the creation time frame, the atlas where a sheet belongs to, among other bibliographic data.

Much of this can be used to offer more powerful tools to browse maps by a specific cartographer, or to flip through the pages of a virtual atlas. Chronoscope World’s supports these kind of scenarios, as well as enhanced commands like “Open all 128 maps of the Ordnance Survey of Scotland at 1 inch to the mile from 1896/97 from the Stanford Digital Repository.” – in fact, this can be accomplished with just one click; or one ChronoLink

Once the structure of the data – the architecture of the information – has been analyzed, the user interface can offer corresponding commands to navigate the vast amount of maps even accross institutions and specific to certain time frames, topics and areas in the world.

Rooms Concept

Larry Tesler was a software engineer and designer at Xerox PARC and Apple Computer. His famous mantra is, “Don’t mode me in.” Invisible modes are unfortunate as the user expects a certain response while the system is in a different state and the response is quite unexpected and eventually frustrating. On the other hand, obvious modes can be used in software design to offer specific functionality without irritating the user. Austin Henderson and Stuart Card have presented the Rooms concept in 1986 [6]. Kai Krause’s tools Goo, Kai’s Power Soap, Kai’s Power Show from 1996-1999 [7] and since 2013 FraxHD for iOS [8] have made extensive use of the Rooms concept to offer best suited environments for specific tasks in the work flow.

Figure 2: Table of maps shows the results for a search command based on the current view of the background map. ChronoLink: mprove.de/chrono?q=41.032,12.83691&z=5.15&t=14&m=HK0351&d=1&c=f

Chronoscope World has no invisible modes, but in addition to the global map view there is one additional room, i.e. the table of maps view. The table of maps is a full screen overlay with map or page previews. The supported set of keyboard commands is dedicated to quickly gain an overview over hundreds of items with the commands PageUp PageDown Home End and the arrow keys to move the selection. Return or a mouse click opens a sheet in full size. The table of maps is even powerful enough to import and display books and volumes with 1,000 and more pages from any IIIF server [IIIF – International Image Interoperability Framework] like Harvard Library or the Internet Archive.

A IIIF Viewer with Smart Drag ’n’ Drop

Although the Chronoscope World was designed to browse old maps, it turns out that IIIF scans of old books contain essentially the same kind of image data. It does not make much of a difference whether an atlas or a mediaval bible is displayed. Both are collections of ordered sheets of paper. When a sheet with out coordinates shall be displayed in Chronoscope World it will be positioned at 0° latitute / 0° longitude, which happens to be South of Ghana in the Atlantic Ocean. All other commands apply as if the book page would be a map.

Chronoscope World introduces cross domain / cross browser window drag ’n’ drop. Any copyright-free book thumbnail can be dragged from Internet Archive’s search results page onto Chronoscope’s browser window. All book pages are loaded and displayed as a table of sheets like originally the table of maps.
Smart Drag ’n’ Drop is not just enabled for Internet Archive, but also for 65 other institutions. Tedious resource hunting in digital humanities becomes as simple as a desktop operation to move a document into a folder. In any case a IIIF manifest URI can be imported into Chronoscope World to display the table of sheets with the manifest’s content.

More on Smart Drag ’n’ Drop at the Chronoscope World User Guide

Technical Background

Chronoscope World is a JavaScript web application. It’s first version was developed for a cultural hackathon Coding Da Vinci. Chronoscope Hamburg became operational with 4 maps in October 2016. Since then, it was utilized in several other use cases. It gained flexibility, robustness, and interoperability features. The Chronoscope can be deployed in an HTML iFrame element and it can be controlled remotely from the embedding web page. ChronoLinks are persistent. Therefore they can be shared on social media to attract new users and to build a community. [Chrono Research Lab on Twitter chronoHH and Mastodon Mastodon chronoHH]

Collections of Leibnitz Institut für Länderkunde IfL and Gottfried Wilhelm Leibniz Bibliothek Hannover have been imported completely with 1,250 and 2,145 maps respectiveley. 78 other openGLAMs have been accessed to contribute maps of interest. No external graphical information system (GIS) is required for georeferencing maps as they can be moved and scaled to their proper location by the Chronoscope itself. Then the corner coordinates are stored in a JSON file.

Watch Georeferencing Scotland

The web app supports the IIIF Content State API [9] for importing and exporting any manifest in presentation layer 2 format.

Other Map Tools in the IIIF Ecosystem

According to the FAIR principles (findable, accessible, interoperable, reusable) library’s collections should be open and flexible to many regards, i.e. it should be the user’s choice to use the tools that best support her tasks. There are several IIIF viewers that offer different features to access openGLAM’s collections. A few are presented here:

Mirador and Universal Viewer
The most prominent IIIF viewers are developed as open source projects. They are used by many GLAM institutions to display their IIIF collections. There are several add-ons to address specific requirements. From the user’s point of view customization might add some desired functionality to a site – but on the other hand each deployment of Mirador or UV looks and behaves a little different, which is a negative factor for the user experience accross all IIIF collections.
Neither Mirador nor UV display maps on a global map. There is no semantical interpretation of metadata to put the digitalizations into context. Metadata is just displayed as plain text.
Both tools support annotations for transcriptions. (The Chronoscope does not support annotations yet.)
Allmaps
The open source project has it’s roots in the Netherlands. Future development is funded by Leventhal Map & Education Center at the Boston Public Library, in collaboration with the American Geographical Society Library at the University of Wisconsin-Milwaukee. Allmaps offers an open environment for everybody to georeference IIIF maps. The set of ground control points is stored as web annotations. As soon as 3 GCPs have been specified the map is warped and bends to best fit the markers. For large scale regions or very old and therefore inacurate maps the intermediate results can be rather surprising as corners and edges tend to escape from the original rectangle. (Chronoscocope World has always 4 corner GCPs. Warping is not possible. Hence continental maps or maps towards the pole regions cannot be georeferences properly. In all other cases 4 corner GCPs have proven to deliver good mappings.)
By default, Allmaps displays one map constellation at a time. Better support inside the viewer to browse and discover other maps is on the roadmap. Chronoscope always maintains the PermaLink back to the providing archive – in Allmaps it is just the link to the IIIF manifest. Then it is up to the creator of the manifest to provide a home link among other meta data.


Left: Allmaps Boston | Right: Chronoscope World Boston

Virtuelles Kartenforum by SLUB Dresden
The Kartenforum offers a quite similar feature set as the Chronoscope does. It comes preloaded with 8,975 georeferenced maps. The majority of maps cover the area of todays Germany, no map is older than 1625 (Chronoscope World offers 7,000 maps for all continents and oceans. The oldest map is the city plan of Nippur in 1,400 B.C.)
The panel on the left corresponds to the table of maps overlay in Chronoscope. It always shows a list of available maps for the search criteria. The panel on the right is used for adjusting the view settings for all active maps. It adopts the Layers palette concept from Adobe Photoshop.


Top: Virtuelles Kartenforum Elbehochwasser 1845
Bottom: Chronoscope World Elbehochwasser 1845

At least a million old maps have been digitized so far – an estimation by the maps communty on IIIF’s Slack space from 9/2022. Even if we assume that Allmaps, Virtuelles Kartenforum and Chronoscope have no overlap, the amount is mereley touching the crust of the corpus. Ease of import and leveraging existing geo measurements from the metadata is crucial. For instance, Chronoscope can parse bounding box coordinates from e-rara (ETH Zurich), Yale and Stanford Library’s IIIF manifests. This makes it possible to display “new” old maps at proper initial locations.

Summary

The author has evaluated and adopted classical desktop-GUI principles for a modern web application, because today’s design systems or web libraries or even current platform design guidelines do not address the requirements of browsing historical geo-spatial maps under a desktop-first approach. (However, some mobile location-based use cases are supported as well.) Instead original concepts based on human factors, developed by research institutes and R&D departments for desktop systems can still be implemented for web applications to provide a decent user experience for browsing and studying digitized maps and other digitized heritage content in IIIF format.

Chronoscope World supports a variety of scenarios as it is capable to run full-screen or embedded in a web page to illustrate e.g. historical travel routes. It stimulates curiosity and exploration by offering related maps and even info spots with old photos, 3D sites and videos.

References

[1]     Ben Shneiderman. 1994. Dynamic Queries for Visual Information Seeking. In IEEE Software 11, 6 (November 1994). https://doi.org/10.1109/52.329404

[2]     Christopher Williamson and Ben Shneiderman. 1983. The dynamic HomeFinder: evaluating dynamic queries in a real-estate information exploration system. SIGIR '92: Proceedings of the 15th annual international ACM SIGIR conference on Research and development in information retrieval, 339-346. https://doi.org/10.1145/133160.133216

[3]     Christopher Ahlberg and Ben Shneiderman. 1994. Visual information seeking using the FilmFinder. CHI ’94: Conference Companion on Human Factors in Computing Systems, 433–434. https://doi.org/10.1145/259963.260431

[4]     Apple Computer, Inc.. 1992: Macintosh Human Interface Guidelines. Addison-Wesley, Reading, MA, 1992

[5]     Matthias Müller-Prove and Frank Ludolph. 2007. Dueling Interaction Models of Personal-Computing and Web-Computing. MEDICHI 2007 – Methodic and Didactic Challenges of the History of Informatics. Klagenfurt 2007. https://mprove.de/script/07/medichi/paper.html

[6]     D. Austin Henderson and Stuart Card. 1986. Rooms: the use of multiple virtual workspaces to reduce space contention in a window-based graphical user interface. In ACM Transactions on Graphics 5, 3 (July 1986), 211–243. https://doi.org/10.1145/24054.24056

[7]     Matthias Müller-Prove. 1999. The Interface of Kai Krause’s Software. self published. https://mprove.de/script/99/kai/index.html  

[8]     Ben Weis, Kai Krause and Tom Beddard. Frax HD (Software). http://fr.ax/

[9]     IIIF Content State API. 2022. https://iiif.io/api/content-state/1.0/

C4EDUCATION logoSupported by the EU-funded project “Virtual Lab on the Collection and Commercialization of digital tools for Citizen education in Cultural Heritage” C4Education

Co-funded by the European Union and The Federal Ministry Republic of Austria, Arts, Culture, Civil Service and Sports

Feedback – please leave a message

I'd be happy to receive and read your feedback via_

à propos

By Matthias Müller-Prove. Created: Apr 2023, Modified: 1/26/24