Skip to content

Instantly share code, notes, and snippets.

@t-book
Created April 8, 2024 08:48
Show Gist options
  • Save t-book/36ca48a531fad6b94b448bf9de5d22ee to your computer and use it in GitHub Desktop.
Save t-book/36ca48a531fad6b94b448bf9de5d22ee to your computer and use it in GitHub Desktop.
import IIIF from 'ol/source/IIIF.js';
import IIIFInfo from 'ol/format/IIIFInfo.js';
import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import { fromLonLat } from 'ol/proj.js';
const map = new Map({
target: 'map',
layers: [],
view: new View({
projection: 'EPSG:3857', // <- google mercator?
center: [0, 0],
zoom: 2,
}),
});
const iiifUrls = [
'https://field.idai.world/api/images/didyma-project/31eadef5-524b-4481-b5d3-92ddecfa2899.jp2/anonymous/info.json',
'https://field.idai.world/api/images/didyma-project/c1f415c8-1f00-478c-a46b-02d1a2331799.jp2/anonymous/info.json'
];
iiifUrls.forEach(url => {
fetch(url)
.then(response => response.json())
.then(info => {
const options = new IIIFInfo(info).getTileSourceOptions();
if (!options || !info.geo || !info.geo.extent) {
console.error('Invalid or incomplete IIIF image information.');
return;
}
// Extent [westen, süden, osten, norden]
const extent = info.geo.extent.map((coord, index) =>
index % 2 === 0 ? fromLonLat([coord, info.geo.extent[index + 1]])[0] : fromLonLat([info.geo.extent[index - 1], coord])[1]
).flat();
const layer = new TileLayer({
source: new IIIF({
url: options.url,
crossOrigin: 'anonymous',
projection: 'EPSG:3857', // <- google mercator?
imageExtent: extent,
}),
});
map.addLayer(layer);
// View der Karte ausrichten nach Bild(ern) …
if (map.getLayers().getLength() === 1) {
map.getView().fit(extent, { duration: 1000 });
}
})
.catch(error => console.error('Error loading IIIF image:', error));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment