IIIF

Introduction One day, I noticed that annotations could no longer be created at all in a IIIF annotation editor deployed on Vercel. It worked correctly on the local development server, but in the production environment, drawing mode could not be entered. There were no console errors. The UI buttons switched correctly, but dragging on the image did nothing. The cause was an automatic upgrade of Annotorious due to caret (^) specification in package.json, and a state management library migration in v3.7.13 that caused issues with webpack’s production build. ...

Introduction As digitization of classical texts progresses, there is a growing need to compare and analyze texts from different manuscripts and critical editions. This article introduces “Text Comparison Tool,” a web application that leverages IIIF (International Image Interoperability Framework) manifests to display and compare images and text from two materials side by side. Demo site: https://iiif-text.vercel.app/ Background and Challenges Classical texts published in digital archives sometimes have text annotations attached to their IIIF manifests. However, there are few convenient tools for comparing the text of two materials side by side. ...

Background Mirador is an IIIF-compatible image viewer that allows side-by-side comparison of multiple IIIF manifests. When displaying manifests published by multiple institutions in a single view, each window title shows the manifest’s label as-is. However, there are cases where you want to display a custom name as the window title for your own project. For example, when the manifest’s label is a long string containing individual volume information, but you want to display a short name indicating the collection. ...

This article explains how to use the Mirador viewer for displaying IIIF images. Reference Implementation The embedding approach is based on Stanford University Libraries’ Stanford Digital Repository. The viewer is embedded above bibliographic information, allowing metadata and images to be viewed on the same page. File Structure a ├ │ ├ │ └ p ─ ─ ─ p ─ ─ ─ s / p └ s └ . w u ─ r ─ e e b ─ c ─ n b l / v / i i c M . c n o i l / d m r o m e p a c i x o d a r . n o l a h e r d t n V o m t i r l s e / / w i e t r e . m t / s x # # # M E E i m n r b v a e i d d r o d o r i n n m v g e i n e c t w o e m v r p a o r n i e a n b t l e s e t t i n g s URL Parameters /mirador/index.html accepts the following URL parameters: ...

Overview To improve the interoperability of geospatial data in the IIIF Georeference Viewer, we added support for data structures conforming to the Linked Places Format (LPF). This article explains the overview of LPF and the implementation details. What is Linked Places Format (LPF)? Linked Places Format is an interoperability format for gazetteer data developed by the Pelagios Network. It extends GeoJSON and incorporates Linked Data (JSON-LD) concepts, enabling sharing and linking of place information across different datasets. ...

Introduction I developed a rotation plugin called “mirador-rotation” for the latest version of the IIIF viewer Mirador (Mirador 4) and published it on npm. This article explains the process from plugin development to publication, and the integration methods for actual use. Background With the major update from Mirador 3 to Mirador 4, the following changes were made: React 16 → React 18 Material-UI v4 → MUI v7 Many other dependency updates As a result, existing Mirador 3 plugins no longer work as-is. ...

Introduction IIIF (International Image Interoperability Framework) is an international standard for image delivery widely used in digital archives and museum collections. The IIIF Content Search API allows you to search annotations (notes and tags) within manifests. However, the IIIF Content Search API typically assumes server-side implementation, and it has been considered difficult to implement on static sites (GitHub Pages, Vercel, Netlify, etc.). In this article, I will introduce a method for implementing the IIIF Content Search API on the client side using Service Workers. This approach enables the use of search functionality in IIIF viewers such as Mirador even on static sites. ...

This article summarizes the steps to generate XYZ tiles from IIIF Georeference Extension JSON, serve them with TileServer GL, and display them with MapLibre GL JS. Bird’s-eye view map of the University of Tokyo overlaid on OSM Overview I ┌ │ │ └ ┌ │ │ └ ┌ │ │ └ ┌ │ │ └ I ─ ─ ─ ─ ─ ─ ─ ─ I ─ i ( ─ ─ m ( ─ ─ T ( ─ ─ M ( ─ F ─ i X ─ ─ b m ─ ─ i t ─ ─ a m ─ ─ i Y ─ ─ - b ─ ─ l i ─ ─ p a ─ G ─ f Z ─ ─ u t ─ ─ e l ─ ─ L p ─ e ─ - ─ ─ t i ─ ─ S e ─ ─ i ─ o ─ g t ─ ─ i l ─ ─ e ─ ─ b d ─ r │ ▼ ─ e i ─ │ ▼ ─ l e ─ │ ▼ ─ r s ─ │ ▼ ─ r i ─ e ─ o l ─ ─ s ─ ─ v e ─ ─ e s ─ f ─ r e ─ ─ ─ ─ e r ─ ─ p ─ e ─ e ─ ─ c ─ ─ r v ─ ─ G l ─ r ─ f g ─ ─ o ─ ─ i ─ ─ L a ─ e ─ - e ─ ─ n ─ ─ G n ─ ─ y ─ n ─ t n ─ ─ v ─ ─ L g ─ ─ J ) ─ c ─ i e ─ ─ e ─ ─ ) ─ ─ S ─ e ─ l r ─ ─ r ─ ─ ─ ─ ─ ─ e a ─ ─ s ─ ─ ─ ─ ─ J ─ s t ─ ─ i ─ ─ ─ ─ ─ S ─ i ─ ─ o ─ ─ ─ ─ ─ O ─ o ─ ─ n ─ ─ ─ ─ ─ N ─ n ─ ─ ) ─ ─ ─ ─ ─ ─ ) ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ ┘ ┐ │ │ ┘ ┐ │ │ ┘ ┐ │ │ ┘ Prerequisites Docker / Docker Compose Python 3.x GDAL (gdal_translate, gdalwarp, gdal2tiles.py) Pillow (pip3 install pillow) mb-util Installing GDAL # b # s r u m e U d a w b o c u O i n a S n t p s u t ( t / H a D i o l e n m l b s e i t b g a a r d n l e a l w l ) g d a l - b i n p y t h o n 3 - g d a l Installing mb-util p i p 3 i n s t a l l m b u t i l 1. Project Structure w ├ ├ ├ ├ └ t ─ ─ ─ ─ ─ m ─ ─ ─ ─ ─ s / d d s f d o a t r o c t y o c k a l n s e / e t / r s e - / n c d o / m p o s e . y m l # # # m C M b u a t s p i t L l o i e m b s r s e f t i y v l l i e e e s s w e r o p t i o n a l ) 2. Docker Compose Configuration docker-compose.yml: ...

A tool for generating XYZ tiles from IIIF Georeference Extension JSON and displaying them with MapLibre GL JS. Repository: https://github.com/nakamura196/iiif-georef-tiles GitHub Pages: https://nakamura196.github.io/iiif-georef-tiles/ Requirements Python 3.x GDAL (gdal_translate, gdalwarp, gdal2tiles.py) Installing GDAL # b # s r u m e U d a w b o c u O i n a S n t p s u t ( t / H a D i o l e n m l b s e i t b g a a r d n l e a l w l ) g d a l - b i n p y t h o n 3 - g d a l Usage p y t h o n 3 s c r i p t s / i i i f _ g e o r e f _ t o _ t i l e s . p y < I I I F _ G E O R E F _ J S O N _ U R L > Example p y t h o n 3 s c r i p t s / i i i f _ g e o r e f _ t o _ t i l e s . p y h t t p s : / / n a k a m u r a 1 9 6 . g i t h u b . i o / i i i f _ g e o / c a n v a s . j s o n Options Option Default Description --scale 0.25 Image scale factor --zoom 14-18 Tile zoom level range --output-dir docs Output directory --name tiles Tile folder name --work-dir work Working directory --keep-work - Do not delete working files Processing Flow I ┌ │ │ └ ┌ │ │ └ ┌ │ │ └ ┌ │ │ │ └ ┌ │ │ └ ┌ │ │ │ └ I ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ I ─ 1 ─ ─ 2 ─ ─ 3 ─ ─ 4 ─ ─ 5 ─ ─ 6 ─ F ─ . ─ ─ . ─ ─ . ─ ─ . ─ ─ . ─ ─ . ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ G ─ F ( ─ ─ D ( ─ ─ E ( ─ ─ C t ( ─ ─ G ( ─ ─ G v ( ─ e ─ e f ─ ─ o I ─ ─ m g ─ ─ o r g ─ ─ e g ─ ─ e i M ─ o ─ t e ─ ─ w I ─ ─ b d ─ ─ o a d ─ ─ n d ─ ─ n e a ─ r │ ▼ ─ c t ─ │ ▼ ─ n I ─ │ ▼ ─ e a ─ │ ▼ ─ r n a ─ │ ▼ ─ e a ─ │ ▼ ─ e w p ─ e ─ h c ─ ─ l F ─ ─ d l ─ ─ d s l ─ ─ r l ─ ─ r e L ─ f ─ h ─ ─ o ─ ─ _ ─ ─ i f w ─ ─ a 2 ─ ─ a r i ─ e ─ J ─ ─ a I ─ ─ G t ─ ─ n o a ─ ─ t t ─ ─ t b ─ r ─ S f ─ ─ d m ─ ─ C r ─ ─ a r r ─ ─ e i ─ ─ e r ─ e ─ O r ─ ─ a ─ ─ P a ─ ─ t m p ─ ─ l ─ ─ e ─ n ─ N o ─ ─ i g ─ ─ s n ─ ─ e a ) ─ ─ t e ─ ─ H ─ c ─ m ─ ─ m e ─ ─ s ─ ─ t ─ ─ i s ─ ─ T G ─ e ─ ─ ─ a ─ ─ l ─ ─ i ─ ─ l . ─ ─ M L ─ ─ U ─ ─ g A ─ ─ a ─ ─ o ─ ─ e p ─ ─ L ─ J ─ R ─ ─ e P ─ ─ t ─ ─ n ─ ─ s y ─ ─ J ─ S ─ L ─ ─ I ─ ─ e ─ ─ ─ ─ ) ─ ─ S ─ O ─ ) ─ ─ ) ─ ─ ) ─ ─ ─ ─ ─ ─ ) ─ N ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ ┘ ┐ │ │ ┘ ┐ │ │ ┘ ┐ │ │ │ ┘ ┐ │ │ ┘ ┐ │ │ │ ┘ Conversion Results Original image After georeferencing Output Files d ├ ├ └ o ─ ─ ─ c ─ ─ ─ s / i s t ├ ├ ├ ├ └ n o i ─ ─ ─ ─ ─ d u l ─ ─ ─ ─ ─ e r e x c s 1 1 1 1 1 . e 4 5 6 7 8 h . / / / / / t j m s l o n # # # M O X a r Y p i Z L g i i t b n i r a l e l e s G I L I I J F S G v e i o e r w e e f r e r e n c e J S O N Local Preview c # d O d p o e c n s h & t & t p p : y / t / h l o o n c 3 a l - h m o s h t t : t 8 p 0 . 0 s 0 e / r v e r 8 0 0 0 IIIF Georeference Extension The IIIF Georeference Extension is an extension specification for adding georeference information to IIIF images. ...

When delivering 3D models on the web, file size is a critical concern. This article describes a case where Draco compression was used to reduce a GLB file by 87%, along with precautions during compression (particularly regarding UV coordinates). https://3dtiles-viewer.vercel.app/glb-viewer.html Data Used Model: Rotunde Brunnen (a rotunda with a fountain) Source: Sketchfab Format: GLB (glTF 2.0 Binary) What is Draco Compression? Draco is an open-source 3D mesh compression library developed by Google. It is supported as a standard extension in glTF 2.0 as KHR_draco_mesh_compression. ...

When trying to display large-scale point cloud data (LiDAR/LAZ) in a web browser, the browser may crash due to insufficient memory. This article introduces how to display millions of points without stress using Potree’s LOD (Level of Detail) technology. https://3dtiles-viewer.vercel.app/potree-lod-viewer.html Data Used Data Name: Utah State Capitol Source: OpenTopography Download URL: https://object.cloud.sdsc.edu/v1/AUTH_opentopography/www/education/MatlabTopo/Utah_state_capitol.laz File Size: 15MB (LAZ compressed) Point Count: 3,481,512 points Location: Salt Lake City, Utah, USA Challenge Trying to load this data directly with Three.js or similar libraries may cause the browser to freeze. ...

Background mirador-annotations is a plugin that adds annotation functionality to the IIIF viewer Mirador. The previous project had the following configuration: Build tool: nwb (Create React App based) UI library: Material-UI v4 Mirador: 3.x React: 17.x However, the following problems were occurring: nwb maintenance stopped - nwb has not been updated for a long time, causing frequent dependency conflicts npm install failures - Old dependencies made setup in new environments difficult Security vulnerabilities - Numerous vulnerability warnings in old packages To resolve these issues, we decided to migrate to: ...

Overview The following features have been added to mirador-rotation-plugin: 90-degree rotation buttons Manifest and rotation angle specification via URL parameters UI improvements (reset button icon change) Help feature (dialog explaining how to use) New Feature Details 1. 90-Degree Rotation Buttons Previously only a 1-degree increment slider was available, but buttons for quick 90-degree rotation have been added. Implementation Details The following changes were made to src/plugins/MiradorRotation.js: i i c } m m o ; p p n c u o o 9 s o p r r 0 t n d t t 度 s a 回 h t t R R 転 a e o o の n n V t t ハ d e i a a ン l w e t t ド e R w e e ラ R o p L R ー o t o e i t a r f g a t t t h t i ( I t e o w c I 9 n i o c 0 n n o = d n = o f r w r f ( o I o r d t d m o i a , m r t ' e i { @ ' c o m @ t n r u m i o i u o + t / i n a i / ) ( t c i d i o c = i o n o > r n s n e : - s { c m - t n a m i e t a o w e t n R r e o i r t a i a l a 9 t / l 0 i R ) o R ; n t o a t } t a ) e t ; L e e R f i t g ' h ; t ' ; Two buttons were added to the UI: ...

Introduction In digital archives using IIIF (International Image Interoperability Framework), materials consisting of multiple volumes or chapters are sometimes combined into a single Manifest. In such cases, there is a need to create links to the opening page of each volume or chapter. This time, I created a simple web tool that extracts the label and first Canvas URL of each volume (range/structure) from IIIF Manifests. Tool URL: https://nakamura196.github.io/iiif-manifest-extractor/ GitHub: https://github.com/nakamura196/iiif-manifest-extractor Features Batch processing of multiple Manifest URLs (one URL per line) List display of labels and first Canvas URLs for each volume/chapter Export in CSV/JSON format Real-time display of processing progress Usage Open the tool Enter Manifest URLs in the text area (multiple lines accepted) Click the “Extract” button Results are displayed in table format Download as CSV/JSON as needed Sample You can verify the behavior with the following Manifest URLs. By entering multiple URLs, you can also verify the batch processing behavior. ...

Introduction When describing metadata for digital images in TEI (Text Encoding Initiative), the facsimile element is used. Particularly in IIIF (International Image Interoperability Framework) compatible digital archives, it is important to properly describe references to manifests, canvases, and the Image API. This article introduces how to define the constraints needed for facsimile descriptions as a schema using ODD (One Document Does it all). Guidelines Followed This ODD is based on the “Linking with IIIF Images” specification introduced in the Japanese TEI guidelines: ...

Introduction The IIIF viewer Mirador has a search feature that can highlight search results for manifests that support the IIIF Search API. However, there are cases where you want to highlight arbitrary regions even for manifests that do not support the Search API. This article introduces a method for achieving highlight display based on annotation information from external data sources, using Mirador’s internal API. Demo Highlight Generator Form - Generate highlights from a form Use Cases Highlighting text regions extracted by a custom OCR system Displaying regions of objects detected by machine learning Visualizing annotations stored in an external database Displaying search results for IIIF servers that do not support the Search API Implementation Basic Mechanism Mirador uses Redux internally, and search results can be registered through the receiveSearch action. By passing JSON in IIIF Search API format to this action, you can display highlights from arbitrary data sources. ...

Introduction I implemented functionality in Mirador, a widely used IIIF (International Image Interoperability Framework) viewer, to meet the following requirements: Display the canvas (page) specified by URL parameters on initial load Highlight search terms within the specified canvas This article shares the approach and implementation method for achieving these requirements. Exploring Approaches defaultSearchQuery Option In Mirador 4, you can automatically execute a search at initialization by specifying the defaultSearchQuery option in the window settings: ...

Introduction To comfortably view high-resolution images on the web, pyramidal structures (multiple resolutions) and tile segmentation are essential. In this article, we used vips to create pyramidal tiled TIFFs from JPEG2000 images and compared the file sizes of various compression methods. Test Environment vips 8.17.3 macOS (darwin) Source image: 764029-1.jp2 (274MB) Source: National Archives of Japan Digital Archive vips Commands JPEG Compression (Lossy) # v # v # v i i i Q p Q p Q p u s u s u s a a a l t l t l t i i i i i i t f t f t f y f y f y f s s s 1 a 7 a 2 a 0 v 5 v 5 v 0 e e e ( ( ( i b i h i n n a n i n e p l p g p a u a u h u r t n t t l . c . c . y j e j o j p d p m p l 2 ) 2 p 2 o r s o o e o s u u s u l t t s t e p p i p s u u o u s t t n t ) _ _ ) _ q q q 1 7 2 0 5 5 0 . . . t t t i i i f f f - - - t t t i i i l l l e e e - - - p p p y y y r r r a a a m m m i i i d d d - - - c c c o o o m m m p p p r r r e e e s s s s s s i i i o o o n n n = = = j j j p p p e e e g g g - - - Q Q Q = = = 7 2 1 5 5 0 0 Lossless Compression # v # v # v i i i D p L p U p e s Z s n s f W c l t t o t a i c i m i t f o f p f e f m f r f s p s e s c a r a s a o v e v s v m e s e e e p s d r i i i i e n o n ( n s p n p B p s u u i u i t t g t o . . T . n j j I j p p F p ( 2 2 F 2 z l o o f o i u u o u b t t r t ) p p m p u u a u t t t t _ _ _ d l r n e z e o f w q n l . u e a t i . t i r t e f e i . d f t i - i f t f - i t l i - e v l t e e i r l - e p 4 - y G p r B y - a ) r p m a y i m r d i a d m i - d c - o c m o - p m c r p o e r m s e p s s r i s e o i s n o s = n i l = o z n n w o = n d e e f l - a b t i e g t i f f Test Results File Compression Method Size Ratio to Original Notes Original JPEG2000 274MB - Input q25.tif JPEG Q=25 57MB 0.21x Lossy, high compression q75.tif JPEG Q=75 167MB 0.61x Lossy, balanced q100.tif JPEG Q=100 2.4GB 8.8x Lossy, high quality deflate.tif Deflate 2.8GB 10.2x Lossless lzw.tif LZW 3.2GB 11.7x Lossless none.tif Uncompressed 4.3GB 15.7x Lossless Image Quality Comparison We visually compared the differences in JPEG compression quality (from left: Q=25, Q=75, Q=100). ...

Overview When there are many annotations in a 3D viewer, backface culling (Raycast) processing becomes a performance bottleneck. This document explains the improvement techniques adopted. Problem Backface culling for annotations requires executing a Raycast (ray-mesh intersection test) for each annotation. This processing becomes heavy for the following reasons: Intersection testing with all mesh vertices is required Computation increases proportionally with the number of annotations Executing every frame makes it difficult to maintain 60 FPS Solution: Execute Raycast Only During Idle We adopted an approach that executes Raycast processing only when the camera has stopped. ...

Introduction Historical maps and classical documents contain characters oriented in various directions. This tool uses polygon annotations to accurately mark up tilted characters, and leverages the tilt information to retrieve rotation-corrected images via the IIIF Image API. How Tilt Calculation Works Vertex Order Rules When creating polygon annotations, specify vertices in the following order: Top-left -> 2. Bottom-left -> 3. Bottom-right -> 4. Top-right By following this counter-clockwise order, the tilt angle can be uniquely calculated. ...