Overview

I introduce how to rotate images and specify regions on initial load in Mirador 4.

Background

As of March 2025, development of Mirador 4 is underway. The alpha version can be checked at the following link.

https://github.com/ProjectMirador/mirador/releases

This is probably a feature from Mirador 4, and the following FAQ describes the initial configuration method.

https://github.com/ProjectMirador/mirador/wiki/Frequently-Asked-Questions#q-how-do-i-change-the-view-of-an-image-to-zoom-to-a-certain-area

Specifically, as shown below, initial configuration was achieved by using initialViewerConfig.

https://github.com/ProjectMirador/mirador/blob/main/__tests__/integration/mirador/mirador-configs/initial-viewer-config.js

Application

Building on the above, I tried the following initial configuration.

Although it may be hard to tell, this allowed the initial load to be rotated 180 degrees while focused on the xywh region, as shown below.

Note that “Bird’s-eye View of the University of Tokyo Main Campus and Faculty of Agriculture Buildings (Graduate School of Agricultural and Life Sciences / Faculty of Agriculture, the University of Tokyo)” is used as sample data.

https://da.dl.itc.u-tokyo.ac.jp/portal/assets/187cc82d-11e6-9912-9dd4-b4cca9b10970

Using this configuration, it should also be possible to support the IIIF Content State API and similar specifications.

Regarding initial configuration, Universal Viewer and Curation Viewer have already implemented this. On the other hand, to my knowledge, initial configuration was difficult to achieve in Mirador 3. (For example, was it not possible to set an initial state with rotation?)

Using the method introduced above, the usability of Mirador should be improved.

Fork

However, I found that specifying rotation in the initial configuration causes an animation to occur. The cause was that it was using viewport.setRotation(viewerConfig.rotation);, as shown below.

https://github.com/ProjectMirador/mirador/commit/66ee878ac2cc1cc138e3c25a104d7c8f96f9fee5#diff-e1020130d5cb187d671ceb5d33d0af8b7a1f5ca462e641b456c165dc4c28a94c

Therefore, I published a fork with immediately: true added.

https://github.com/nakamura196/mirador/actions/runs/14064240031

By using the above, even on initial load, the image can now be displayed rotated at the specified angle and focused on the specified region without animation.

Summary

I hope this serves as a useful reference for using Mirador 4. I also plan to work on making previously developed plugins compatible with Mirador 4.