iif_ol.js

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));
});