Overview

I implemented a IIIF representation of “Okoshi-ezu” (raised picture maps). The target materials are the Okoshi-ezu contained in the “Dai Nihon Kaishi Compilation Materials” held at the University of Tokyo Komaba Library.

https://utda.github.io/kaishi/

Please watch the following video for an overview.

“Okoshi-ezu” IIIF Implementation

The Application

The following is the Tokyo National Museum’s description of “Okoshi-ezu”:

“Okoshi-ezu” are foldable simplified models that reproduce the three-dimensional structure of buildings by pasting wall and ceiling diagrams onto a flat plan drawing. They were particularly used as a drawing technique suited for reproducing tea rooms, which have complex three-dimensional structures within small spaces. (From the Tokyo National Museum - Japanese Art (Honkan) Japanese Natural History Series: Okoshi-ezu)

The representation of these Okoshi-ezu was implemented using IIIF’s “Choice of Alternative Resources.” Additionally, the viewer “Mirador 2” was customized to enable animation of the Okoshi-ezu movements. Open the viewer and press the “Play” button at the top of the screen.

Creation Method

Creating the IIIF Manifest File

Referencing IIIF’s “Choice of Alternative Resources,” create a IIIF manifest file as follows.

https://github.com/utda/kaishi/blob/master/docs/iiif/7-2-47/manifest.json

Add information about images to be overlaid to the items array. At this point, specify the display position of the image to be overlaid in the canvas URI specified by “on.” The following example describes placing an image in the range from starting position (2560,512) to width (3072,4096) on a canvas created with the size of the original image (the base image).

https://github.com/utda/kaishi/blob/master/docs/iiif/7-2-47/manifest.json#L111

Specifying this range is the most labor-intensive part, but in this case, an XML file describing the position information of the overlay images already existed.

https://github.com/utda/kaishi/blob/master/src/data/xmls_layered/7-2-47.xml

The items array above was automatically generated from the information described in this XML file.

Customizing Mirador 2

Instructions for customizing Mirador 2 are available here. Referencing these instructions, I added descriptions like the following.

https://github.com/utda/kaishi/blob/master/docs/mirador/index.html#L95

“Play,” “Stop,” “Check All,” and “Clear” buttons were added, along with functions to be executed when each button is clicked. First, a list of checkboxes in Mirador’s layer tab is obtained. Then, using setInterval, checkboxes are clicked at regular intervals.

Summary

I hope you enjoy the Okoshi-ezu and that this serves as a reference for creating applications using IIIF’s layer functionality.