Overview# In the following article, I introduced the “Image Collection Management” tool designed for easily trying out IIIF features.
This time, I will introduce the technologies used behind this tool.
Introduction# The Image Collection Management tool is a web application for managing and publishing image collections in the IIIF (International Image Interoperability Framework) format, an international standard. This article explains the technical implementation of this tool, with a focus on the IIIF specification implementation and handling of geospatial information.
Tech Stack# Frontend : Next.js 14 (App Router), React, TypeScriptBackend : Next.js API RoutesData Storage : AWS S3-compatible object storage (Cloudflare R2)Authentication : NextAuth.jsMap Display : Leaflet, MapLibre GL JSIIIF Viewers : Mirador 3, OpenSeadragonIIIF Implementation Details# 1. Supporting Both IIIF Presentation API v2/v3# This tool supports both version 2 and version 3 of the IIIF Presentation API. This ensures compatibility with various IIIF viewers.
Main Differences Between v2 and v3# { } { } " " " " " } " " " " " I @ @ @ l s ] I @ i t l i I c i t a e " " I c d y a t I o d y b q @ c I o " p b e F n " p e u t a F n : e e m t : e l e y n t " l s v e " " n p v v e " : " " 2 x " : : c e a 3 x h : : t h e " s t t " s " t " " s : e s " t M { [ t : t s T " s t : p a . r p c i : " " r s n " . u " s : t s : u " : i e . c h : M l [ c c h / f n ] t t / a e { : [ t t / e " u t / n " S . u t e s : r p e i , e . r p x t e : x f q . e : a " [ / a e u ] / m , " a / m s e / p T r i p t n i l i r i l " c i e t a i e , e i . l y f . " f c e . c , . o " o i o i m ] f o m o / / m } c a m a a , a p a p n n i n i i v / i / f a p f p e s r e r s e e s e t s s t s " e " e , n , n t t a a t t i i o o n n / / 2 3 / / c c o o n n t t e e x x t t . . j j s s o o n n " " , , 2. Multi-language Support# In v3, labels and descriptions can be managed by language:
{ } " } " } l , s a " " u " " b j e m j e e a n m a n l " " a " " " : : r : : : y [ [ " [ [ { " " : " " J E J E a n { a n p g p g a l a l n i n i e s e s s h s h e e T d T i d e i t e s t l s c l e c r e " r i " ] i p ] p t , t i i o o n n " " ] ] ,
3. IIIF Image API Support# Images served from external IIIF Image Servers can also be registered. By specifying the info.json URL, high-resolution images can be efficiently delivered:
c } o ; n c } c c c R s o ) o e t n m b ; n n n g s e o s F s T s i h t t d t u t h t s a h y l u t n i o : b l i m t e d n d a - m b h r l f : J s s a n u e o S e i g a m i I J ' O U z e i b m n s P N r e U l n a f o O . l r a g o n S s i l U i e J T t = m R l s = ' r a = L U f o , i i g r r n a n n e ` ( l o A w g f $ 4 m d a i o U { 0 = d i f J R b 0 i t y s L a p ` n = ( o s x $ f f { n e { o a e . U w b . s t u i r i a j y c r d l d s s n h l } t e o c ( : / h U n ' f ) r ( / i u l i a n i l } n p f n l / f i o f / f o / J o f u J i s J u l s i o s l l o i n o l / n f U n / 4 U - r [ 0 0 r i l ' / 0 l n @ d , : f } i e / o ) d f 0 s ' ' a / t , ] u d r ; l e i { t f n . a g j u ) p l g t = ` . > ; j p { g ` ; 1. navPlace Extension (IIIF v3)# The navPlace extension is used to indicate the representative location of the entire manifest. It is used for displaying collections on maps.
i } c } n o ; t i t f } n " ] " } e d y e > A s @ , n r ? p a t p } g } ; d t c " " a " " } f : e t y r ; e ; d o h h v t f ] a : u p o l o t c i m n t t P y e " " } " } c s r e p a m y o n a t t t l p a t g , p e t ' e : e b e p o g n e p p a e t y e " " r " r F s r e t e r i x : : c " u p o t c o l N i e : ' t l r : d l f t / e : r e m y o p a a n a F i ? y i o e " / " e " e p o e b v g t A e e : : ' n c s : i i : " s : t e r r e P ; u r a s P a a t i i F : r " d t l l r r t ? { { o t t [ i i { e " y : i i " a e a u : i e i = f f a [ F " n e : c C y r [ n s o . . t { e : " a s e o < e { l t : n { i i u a P t " { l { ' a ' o r t { o e : { l ; n ; [ i / e u i s " e g n n a a C r n " { e c : u f p p o e t : n t m o i i l " " " i s b r / / l , , [ : o t e m p e e 1 n r r a r x c 3 [ ' i , t e t t 9 " ; n i s e i . T g n o e n o 7 o ] u n n s n 4 k : m t i " 5 y b t a o , 4 o s e o t n , t r i S r ] a n 3 t i ; n a 5 a n m / v . t g a 3 p 6 i [ n / l 5 o ] i c a 8 n [ f o c 6 " } l e n e ] ] ; o s t / n t e c } g x o i t n t . t T u j e o d s x k e o t y , n . o " j l , s S a o t t n a i " t t i u o d n e ]
2. Georeference Extension (Image Georeferencing)# By using the Georeference extension, specific points in an image can be mapped to real-world coordinates. This is used for georeferencing historical maps and similar applications.
i } n t t m t b } e y o a o ; r p t r d t t } f } f e i g y y r ; e > a : v e : p a t o a t p } g } m } ; c a t e n y p t y r ; e ; e ; e ' t : { : s p t u p o r o t c t l t u A i f e i r e p e m y o a a a r G n o s ' o : o e : e s e p o d b g l e n n t F r n s r o t e r a e s ? o o : r e m ' s : ' t u r : d t l ? : A t i a a p ? F i r y i a ? : n a ' n t t o : A e e c : ' n ? : s n t g g u i l r a s e P a : s t o i e ; r o y { r t : C { o t s t r t o o e n n a u o i e { t r i a n r C ? o o y r { o n s r i n t ' e o : m r < e r t : i n g i ; f l i d { ' d ' n g ; o e C l { a e ; s ; [ g [ n r a e l r : n ; ] e n c ' ? u ; { n v t : [ m c a i n b i s o n u e n n ' u m r g U ' t m b , ' R ; h b e ; I i e r n n r , u - m p } n b l ; u e a m r t b ] e e ; - r s ] p ; l i g n e e o ' c g ; o r o a r p d h i i n c a t c e o s o r o d n i n t a h t e e s i m a g e
Implementation Example: Setting Control Points# c ] c r 1 3 ` o ; o e 0 0 ; n { } { } n s 0 0 S s , I s o , , e t r c l r c l m t u 2 4 t e o a e o a p r 0 0 t g s o b s o b o c c 0 0 i e o r e o r e r s e , , n o u d l u d l t v X 1 1 g P r i : r i : D , 3 3 o c n c n f a r 9 9 c i e a " e a " r t e . . o n C t T C t U o a s 7 7 n t o e o o e e m o 4 6 t s o s k o s n = u 5 7 r r : y r : o C r 4 3 o = d o d S ` c , , l s [ s [ S V e 3 3 [ : 1 S : 1 t Y 5 5 p 3 t 3 a i , . . o [ 9 a [ 9 t s l 6 6 i 1 . t 3 . i o 5 8 n 0 7 i 0 7 o a n 8 1 t 0 4 o 0 6 n l g 6 4 s , 5 n , 7 " s i , , 4 " 3 o t T U b 2 , 4 , u o e e 0 0 p d k n t 0 3 0 3 o e y o w ] 5 ] 5 s , o e , . , . s l S e 6 6 i a S t n 5 8 b t t a 8 1 l i a t i 6 4 e t t i m ] ] u i o a p , , d o n g i e n e x , e l c l a o b o c l U e r o a e l d o t n i r i o n d t a i u S t n d t e a e a s t / t e l i a s o o n n n d o g n i g t e t u o h d g e e r a i o p m f h a i g T c e o k c y o o o r S d t i a n t a i t o e n s 3. Map Display Implementation# Collection Map (Using Leaflet)# c } o ; n r ) D s e ; i t t < s u M / p C r a < { M l o n p T i ) a a l C i t i } p y l ( o l e t C e n e m e < o i c t L s m M / n t t a a . . a p k < M t e i i y m l r o e P / a a m o n e a o k s y o < < P r i s n e r p c e i = p h i o k n M r ( a r t { u 3 m p e e i a u i t i i p > g u r r n p c r t i o t > { p > > e l e o n e i s > t = n = m n = m t r h t " { . e c e ( e h = & [ i m = { r t > & i d . { c = t t } t i o i { p ( e i t l t [ s m t e l e 3 : . l m e m 5 l e . c s . / o } t t 6 { c < h i } 7 s a / u o ) 6 } t h m n 2 . i 3 b = , t o > n o > i n a n 1 l . i { 3 e l l a 9 . a } . o t m 6 p i a a 5 e t l p 0 n u t 3 s d = ] t e { } r , i e t z e i e o t t m o m e . m a m t = p . i { . l t 1 o o l 0 r c e } g a } > / t { i z o } n / . { l x o } n / g { i y t } u . d p e n ] g } "
Integration with External Viewers# Generated IIIF manifests can be visualized in various IIIF viewers that support the navPlace and Georeference extensions. For example, by using theIIIF Map Viewer , it is possible to browse collections containing geographic information on a map.
Access Control Implementation (Planned)# The following access control features are planned for future implementation:
1. Manifest-level Control# Public/private settings per manifest Access permission management by user groups Fine-grained access control by owners 2. IIIF Auth API# Implementation of an authentication system compliant with the IIIF Authentication API is planned:
Token-based authentication Issuance of time-limited access tokens Integration with external authentication providers Avoiding CORS Errors# CORS issues when registering images from external URLs are resolved with a server-side proxy:
e } x p c c c c c t } } / o o o o o o r a r n n n n n y c c r c r p t s F s s B s s I o o e a e i t e t t a t t f { n n t t t / a t s s s u c u i s { c r b e b d S t t r h r m y h e u 6 a a h n n a n u s f 4 s t a s m { g c r i p f e a r h e { { e l m o e e 6 U p a t - f a n r n 4 r r a d d m u } g s c l i p d a a e n e e = o = s a t t t c = d = = t a a a t o = a e B a a U U d i a n w u ` v ( r r a o w a a a f d a a = l l t n a t w i n f a i w , , a i h a t d e t l a a / P t e i r a a i w w w r O t r r . : b t a i i o S r s e e f $ l i d d u T e e f s t r { e i t t t t ( q r e p u o c , m h h e r u v t o r m o p s : : . e e e c n n ( n a o h t q s r h s b t l r a m 1 s u t ( e t u e s t r e 9 e . s u . o f n o ( p t 2 s j i r a f t ' ( a 0 t s d l r t e T g s B d , : o e ) r h r y e h u a n ; a e ) p t a f t h N ( y . e r f a e e ) B c t } i p e . i x ; u l o ; m ' r w g t f i S b a ) . i h R f e t a g ) f d t e e n r s e . r t : q r t i e d o h u ( n 6 d e m , 1 e ) g 4 i f ( 0 s ; ( , m a b h 8 t ' $ e u u e 0 ) b { n l f i a b s t f g } { s a i ; e h ; e s o r t 6 e n ) : 4 6 s ) ' 4 . m ) } m e ; ` e t ; t a a d d a a t t a a . ( h ) e ; i g h t } ; 1. Progressive Image Loading# c } c } o ; o ; n r n c r F s e S s o e e t t e t n t t u l s u c g r e s t r h e n c e n s i t t l t i n T ` i e a s z g h $ n c r i e u { g t g z s a m i O e e [ p b i t p t s s p n i h t W . i r a f e i i f z o i B m d i e p l a o a t n s r U s p l h d . i r e t S ( l a l U i i = s e t r m z n e = l a e 4 = g l } l 0 > t y ( / = 0 h i f t ; s s i u h ( . - i i l u s w z f l m i i 1 e B / b z d ] d a $ n e t ; s { a s h i e t i : m U a l > a r r A = g l g s r e : e i r t s t z a a s W e y r u t i < g s r d f { e i i t r w t n n h o i W g g } m d i , , t d t / t h t h t 0 h : h e a / e r d n & I g e s u & I e f i m I t a z b s F W u e e . i l r w I d t a , i m t . r d a h j r h t g : p a e h e g y i n ` g < A u ; h = P m t I b : 8 e 0 r n 0 u ) = m b 4 e 0 r 0 } ) > ) = > = > { { 2. Leveraging S3-Compatible Storage# c } o ; n c } a r I s o ) w e m t n B K B C ; a t a s u e o o i R u g u t c y d n t e r e p k : y t t n l c e : e s u d o o t k n 3 r ` e a m : e f t C n $ l d m y i T l { i T a p , l y i a p v o n r e p e r e S d o , e n C o r 3 c : t D c y = e . N e = s ' s - s u n s i e b s s a e . m n a . i s w e a d s e n y n g ( e n g n P v e c d v c u . / o . C t S j m U S l ( O 3 p m R 3 o f b _ e a L _ u i j B g n P d l e U ' d U f e c C ) B l : t K ; L a C E I r B o T C e u m _ _ f m N U R f a A R 2 e n M L r d E } , ( , / { $ k { e k y e : y } s ` t ; r i n g ) = > { Integration with Self-Hosting# Integration with Self Museum# Generated IIIF collections can be easily published onSelf Museum :
{ } " } " } l , s a " " u " " b j e m j e e a n m a n l " " a " " " : : r : : : y [ [ " [ [ { " " : " " J E J E a n { a n p g p g a l a l n i n i e s e s s h s h e e T d T i d e i t e s t l s c l e c r e " r i " ] i p ] p t , t i i o o n n " " ] ] ,
0
Summary# The Image Collection Management tool is implemented to balance usability and performance while conforming to the latest IIIF specifications. Key technical features:
Standards compliance : Full support for IIIF Presentation API v2/v3, Image API, navPlace/Georeference extensionsFlexible geospatial information : From simple location information to complex georeferencingSecure access control : JWT token-based authentication and fine-grained access controlPerformance : S3-compatible storage and CDN, automatic selection of appropriate image sizesInteroperability : Integration with various IIIF viewers and toolsFuture plans include implementing the IIIF Change Discovery API and Content Search API, as well as adding more advanced geospatial analysis features.
References# 
