Last week the New York Times published a fascinating examination of a painting by Thomas Eakins. Eakins' painting 'The Gross Clinic' is a gruesome depiction of a 19th Century operating theater.
Taking Lessons From a Bloody Masterpiece is a great scrollytelling crtique of the painting by art critic Jason Farago. As you scroll through Taking Lessons From a Bloody Masterpiece Farago explores in close detail the composition and technique used in The Gross Clinic. This detailed examination of the painting is made possible by creating images tiles of the painting just as map tiles are used in interactive maps.
On Maps Mania I've often lamented the fact that interactive mapping libraries, such as Leaflet.js, are not used more often in order to look more closely at works of art. One reason why we don't see lots of great scrollytelling examinations of paintings, such as the NYT's brilliant Taking Lessons From a Bloody Masterpiece, might be that there aren't that many working examples. I therefore decided to create my own scrollytelling painting critique using Leaflet.js.
The Drawing Lesson is the result. In this scrollytelling examination of Jan Steen's painting of an artist teaching two young pupils how to draw I have used the Leaflet mapping library to take a close detailed look at a 17th century Dutch masterpiece.
As you scroll through The Drawing Lesson the interactive zooms in on different details in Jan Steen's paintings. This allows us to explore the symbology used by the painter and to take a close look at what the painting tells us about the life and work of a Dutch painter in the 17th Century
If you want to clone my map of the painting you can easily do so on its Glitch page.
At the heart of The Drawing Lesson is the leaflet-iiif plug-in. Museums and art galleries around the world use the iiif format to present artworks as zoomable images. The leaflet-iiif plugin allows you to use iiif manifests with the Leaflet mapping platform. To use a different image in my Drawing Lesson map you just need to change the manifest URL to a different iiif manifest.
I have also used the waypoints JavaScript library in my presentation of Jan Steen's The Drawing Lesson. Waypoints is used to control the scrollytelling elements. It is what triggers the panning and zooming elements as the user scrolls through the page.
Of course the leaflet-iiif plug-in can also be used with vintage maps which have been digitized using the iiif format. For example here is Matthew Paris' Map of Britain. I created this scrollytelling story-map to explore Matthew Paris' geographical conception of Britain in the 13th Century. This interactive also includes modern English translations of the map's medieval place-names. Just click on the map labels to view the modern day translated names.
Thank. This is helpful. At some point I want to do some story telling using something like what you're doing.
ReplyDeleteOne question? Why click instead of rollover (I'm lazy). I can think of one reason is that it can be annoying to have something change when one doesn't want it to. A bit over the top, but a choice would be nice; but what tiny percentage would know what it meant and how many would notice it anyway.
PS I find this type of reCAtptha really annoying because they treat me like an idiot. Sometimes it's hard to discern.
@unknown - I didn't actually think of using a mouseover or hover trigger rather than a click. A mouseover event could actually be a better fit for this map.
ReplyDelete