Mind the Zoom: Data Clustering Affordances in Leaflet.js

By using the Leaflet JavaScript library to plot and track correspondence networks in the PRINT project we are able to provide more detail as users refine their selection through the website display options. The ability to zoom in to provide more information is important since our target historical correspondence networks frequently share the same nodes, i.e. cities, which can create a data clustering issue when trying to present the data visually. By creating multiple view levels, the PRINT Leaflet instance will be able to demonstrate spatial themes at the macro level zoom while at the same time providing details on specific nodes, correspondence routes, and people at the micro level zoom. The images provided here show a low fidelity mockup of how the map layers will handle different map layers. The map shown in the background has been blurred so as to enhance the demonstration, no view levels on the production environment will ever have a blurred map.

A cluster of correspondence paths.

Zoom detail of a single correspondence trail.

The first image on the right shows what could be considered a typical array of lines that overlap over a single node. If you were to try and include text or any additional information, the Leaflet map would be hard to view and contextualize. While our example here shows just three correspondence paths, as the PRINT project adds more data the macro level views will have be condensed and consolidated. This will force users to zoom to discern individual correspondence paths. In the second image on the right you can see an individual path of correspondence that has been selected. All other correspondence paths have changed style and opacity so as to bring the selected path into visual focus. With this style of view a tool tip and writing on the path can be viewed with easy, allowing more visual real estate for content and links to accompanying documentation.