I am trying to display IIIF images in my React application using OpenSeaDragon (OSD). All works well, untill I actually try to read in the images from the source.
First off, I followed the example from the OSD website: https://openseadragon.github.io/examples/tilesource-iiif/. After ignoring the TypeScript errors, this example works as expected and displays the image in the canvas. Now I went and replaced the static @id property with the value I get returned from one of our source APIs (we want to support multiple). The manifest (info.json) url: https://iiif-manifest.oxalis.br.fgov.be/specimen/BR0000025668070V/manifest. This tries to fetch the image from the source API, but fails to find so because the url is formatted incorrectly.
Generated url by OSD: https://iiif-manifest.oxalis.br.fgov.be/specimen/BR0000025668070V/manifest/full/328,/0/default.jpg
Correct url provided by source: https://iiif-image.oxalis.br.fgov.be/V/BR0/000/025/668/070/BR0000025668070V.jpg/full/full/0/default.jpg
As you can see the url provided by the source does make use of the IIIF API specification, but uses a different path for the manifest file and the actual images that OSD specifies.
How can I adapt the OpenSeaDragon configuration to correctly format the urls? My expectation was this is going to be defined in the manifest file, but whatever I try, the path does not change and keeps on appending: '/full/328,/0/.default.jpg' at the end of the manifest url.
My OpenSeaDragon config:
OpenSeaDragon({
id: "openSeaDragon",
preserveViewport: true,
visibilityRatio: 1,
defaultZoomLevel: 0,
sequenceMode: true,
tileSources: {
"@context": manifest['@context'],
"@id": manifest['@id'],
"height": 7200,
"width": 5233,
"profile": ["http://iiif.io/api/image/2/level2.json"],
"protocol": "http://iiif.io/api/image",
"tiles": [{
"scaleFactors": [1, 2, 4, 8, 16, 32],
"width": 1024
}]
},
showFullPageControl: false,
showHomeControl: false,
prefixUrl: "https://cdn.jsdelivr.net/npm/[email protected]/build/openseadragon/images/"
})
Where @id = "https://iiif-manifest.oxalis.br.fgov.be/specimen/BR0000025668070V/manifest"
and @context = ["http://www.w3.org/ns/anno.jsonld", "http://iiif.io/api/presentation/2/context.json"]
Thanks in advance! ~ Tom