31:T514,viewer = { const options = { // constrainDuringPan: true, // preserveViewport: true, element: container, // minZoomLevel: 0, prefixUrl: "https://openseadragon.github.io/openseadragon/images/", showNavigator: true, gestureSettingsMouse: { clickToZoom: false }, tileSources: initialTileSources // visibilityRatio: 1 }; const viewer = OpenSeadragon(options); // viewer.world.addHandler("open", () => { // viewer.viewport.fitBounds(initialBounds, true); // }); viewer.addHandler("canvas-click", function (event) { if (!event.quick) { return; } const webPoint = event.position; const viewportPoint = viewer.viewport.pointFromPixel(webPoint); mutable clickedPoint = viewportPoint; }); viewer.addHandler("canvas-key", function (event) { if (!event.originalEvent.repeat) { const keyCode = event.originalEvent.keyCode; const arrowKeys = [37, 38, 39, 40]; if (arrowKeys.includes(keyCode)) { const overlay = viewer.getOverlayById("overlay"); if (overlay) { const bounds = overlay.getBounds(); event.preventVerticalPan = true; event.preventHorizontalPan = true; mutable pressedKey = { keyCode, bounds }; } } } }); return viewer; }32:Ta75,2) Geografische coordinaten in de [projectie van Bonne](https://nl.wikipedia.org/wiki/Projectie_van_Bonne) met de Amsterdamse Westertoren als nulmeridiaan. Door studenten en docenten van de TU Delft, in samenwerking met het Kadaster, is in het kader van het [Geomatics Synthesis Project](https://www.tudelft.nl/onderwijs/opleidingen/masters/geomatics/msc-geomatics/programme/synthesis-project) een [PROJ pipeline](https://proj.org/en/9.3/operations/pipeline.html) ontwikkeld waarmee de XY coordinaten van de hoekpunten (met een aantal tussenstappen) kunnen worden omgerekend naar WGS84 coordinaten. Hiermee kunnen de kaartbladen worden gegeorefereerd. ```bash "+proj=pipeline +z=0" "+step +proj=bonne +lat_1=51.5 +lon_0=0 +a=6376950.4 +rf=309.65 +pm=4.883882778 +inv" "+step +proj=cart +a=6376950.4 +rf=309.65" "+step +proj=helmert +convention=coordinate_frame +exact +x=932.9862 +y=86.2986 +z=-197.9356 +rx=2.276813 +ry=1.478043 +rz=4.673555 +s=50.09450" "+step +proj=noop" "+step +proj=cart +ellps=WGS84 +inv" ``` Meer informatie: - [Rapport _Georeferencing Historic Map Series: An Automated Approach_](http://resolver.tudelft.nl/uuid:a39e2c3e-640c-4fa5-8abf-1e376d75ae5f) - [GitHub repository](https://github.com/geor-tudelft/iiifmap) - [Script om Bonnebladen XY naar Geojson te converteren](https://github.com/geor-tudelft/iiifmap/blob/master/project/phase1/wp1_convert_bonnebladen_to_geojson.py) - [Geojson van de bladindeling](https://github.com/geor-tudelft/iiifmap/blob/master/project/phase1/results_wp1/WGS84coordsBBlad.geojson) Helaas is de Bonne projectie niet beschikbaar in [proj4js](http://proj4js.org/), de javascript port van PROJ, waardoor de berekening niet hier op Observable kan worden uitgevoerd. Zie: - [Broncode proj4js](https://github.com/proj4js/proj4js/tree/master/lib/projections) - [Broncode PROJ](https://github.com/OSGeo/PROJ/blob/9.3/src/projections/bonne.cpp) - [Documentatie PROJ](https://proj.org/en/9.3/operations/projections/bonne.html) _Afwijkende bladen_ Niet alle bladen volgen de standaardmaat (zie bijvoorbeeld de bladen aan de randen van Limburg), en er zijn geen historische bronnen waarin de afwijkende coordinaten zijn beschreven. Hoe kunnen ook deze bladen ook gegeorefereerd worden? De bladen zijn gedigitaliseerd op 300 dpi, wat overeenkomt met 300 pixels per 2.54 cm. Ze hebben een fysieke afmeting van 40 bij 25 centimeter en zijn gedigitaliseerd ongeveer 4725 x 2952 pixels groot (met nog een zwarte rand eromheen). Vanuit de schaal van de Bonnebladen (1:25000) kunnen we afleiden dat 1 pixel overeenkomt met 2.1 meter in de werkelijkheid. (Voor de nettekeningen van de TMK (1:50000) komt dit neer op 4.2 meter.)33:T5cb,manualMapping = { const map = new Map(); map.set(1, [19, 0]); map.set(5, [18, 1]); map.set(12, [14, 2]); map.set(23, [12, 3]); map.set(36, [11, 4]); map.set(52, [11, 5]); map.set(68, [10, 6]); map.set(85, [10, 7]); map.set(102, [9, 8]); map.set(120, [9, 9]); map.set(138, [9, 10]); map.set(156, [9, 11]); map.set(174, [9, 12]); map.set(192, [9, 13]); map.set(210, [9, 14]); map.set(227, [9, 15]); map.set(244, [9, 16]); map.set(261, [9, 17]); map.set(278, [9, 18]); map.set(293, [8, 19]); map.set(309, [8, 20]); map.set(327, [8, 21]); map.set(345, [8, 22]); map.set(363, [7, 23]); map.set(382, [7, 24]); map.set(401, [7, 25]); map.set(420, [6, 26]); map.set(439, [6, 27]); map.set(457, [5, 28]); map.set(477, [4, 29]); map.set(498, [4, 30]); map.set(519, [3, 31]); map.set(539, [2, 32]); map.set(556, [1, 33]); map.set(575, [1, 34]); map.set(594, [0, 35]); map.set(614, [0, 36]); map.set(634, [0, 37]); map.set(655, [0, 38]); map.set(676, [0, 39]); map.set(697, [0, 40]); map.set(705, [12, 40]); map.set(714, [0, 41]); map.set(721, [12, 41]); map.set(729, [0, 42]); map.set(731, [3, 42]); map.set(734, [13, 42]); map.set(741, [3, 43]); map.set(743, [15, 43]); map.set(749, [17, 44]); map.set(752, [17, 45]); map.set(755, [17, 46]); map.set(757, [16, 47]); map.set(761, [16, 48]); map.set(765, [16, 49]); map.set(769, [16, 50]); map.set(773, [16, 51]); return map; }34:T67e,function handleKeyPress(obj) { if (obj) { const keyCode = obj.keyCode; const position = { x: Math.floor(obj.bounds.x), y: obj.bounds.y }; let sheet = getSheetAtPosition(position); const index = bonnebladen.findIndex((item) => item.sheet === sheet); const count = viewer.world.getItemCount(); let newIndex = null; let newBounds = null; let newImages = null; switch (keyCode) { case 37: // Left newIndex = index === 0 ? count - 1 : index - 1; break; case 39: // Right newIndex = index === count - 1 ? 0 : index + 1; break; case 38: // Up position.y = position.y - scaleFactor; sheet = getSheetAtPosition(position); newIndex = sheet ? bonnebladen.findIndex((item) => item.sheet === sheet) : null; break; case 40: // Down position.y = position.y + scaleFactor; sheet = getSheetAtPosition(position); newIndex = sheet ? bonnebladen.findIndex((item) => item.sheet === sheet) : null; break; } if (newIndex !== null) { newBounds = viewer.world.getItemAt(newIndex).getBounds(); let image = viewer.world.getItemAt(newIndex).source["@id"]; mutable selectedSheet = { index: newIndex, bounds: newBounds, ...bonnebladen[newIndex], image }; createOverlay(newBounds); viewer.viewport.fitBounds(newBounds); return ( "Moved to sheet " + bonnebladen[newIndex].sheet + " " + bonnebladen[newIndex].title ); } } }35:T5ff,// See: https://github.com/openseadragon/openseadragon/issues/866#issuecomment-190820248 function changeImage() { if (selectedSheet) { const currentImage = viewer.world.getItemAt(selectedSheet.index); const bounds = selectedSheet.bounds; const sheet = selectedSheet.sheet; const currentImageId = currentImage.source["@id"]; const selectedIndex = selectedImage === "Front" ? 0 : 1; const tileSource = images.get(selectedSeries.images[selectedIndex]); const selectedImageId = selectedSeries.images[selectedIndex].replace( "iip", "iipsrv?IIIF=" ); const rect = new OpenSeadragon.Rect( Math.floor(bounds.x), bounds.y, 1, scaleFactor ); const westLimburg = [769, 765, 761, 757]; const fitBoundsPlacement = westLimburg.includes(sheet) ? OpenSeadragon.Placement.TOP_RIGHT : OpenSeadragon.Placement.TOP_LEFT; if (currentImageId !== selectedImageId) { viewer.addTiledImage({ // tileSource: selectedImageId + "/info.json", tileSource, index: selectedSheet.index, replace: true, fitBounds: rect, fitBoundsPlacement, // x: Math.floor(bounds.x), // y: bounds.y, // width: 1 success: function () { const newBounds = viewer.world .getItemAt(selectedSheet.index) .getBounds(); createOverlay(newBounds); // viewer.viewport.fitBounds(bounds, true); } }); return "Image changed!"; } } }36:[{"id":"cd72530c0b6922152b4b2f380a79651fac82315ef841798ad6bc3ea3ffe67b835316853a6e00ea5ec6c1f2c28a5a3ef706a1bf4b18d7c668ae3334bf15ed23fc","href":"https://static.observableusercontent.com/files/cd72530c0b6922152b4b2f380a79651fac82315ef841798ad6bc3ea3ffe67b835316853a6e00ea5ec6c1f2c28a5a3ef706a1bf4b18d7c668ae3334bf15ed23fc","name":"imagesComplete.json","type":"application/json","lastModified":1716564028387.702,"size":2545640},{"id":"6c28573d021f64eccbd24e3a887dfe4d8b3faf40cf6b18bb56ea8dd296f33194cc998c5db01230005ccfaa488c10e2666a6100f824fec96fe9b97a8d41ad5f29","href":"https://static.observableusercontent.com/files/6c28573d021f64eccbd24e3a887dfe4d8b3faf40cf6b18bb56ea8dd296f33194cc998c5db01230005ccfaa488c10e2666a6100f824fec96fe9b97a8d41ad5f29","name":"bonnebladen.json","type":"application/json","lastModified":1696001036719.028,"size":3061035},{"id":"40ec4b1b9d05f548613e472e648936ec7027d581e2a81aabf72e87c7b0e8405fd86d364f19dcd48028b73741db0dd28a5260d715e10cdc9dd1fe662985f7997d","href":"https://static.observableusercontent.com/files/40ec4b1b9d05f548613e472e648936ec7027d581e2a81aabf72e87c7b0e8405fd86d364f19dcd48028b73741db0dd28a5260d715e10cdc9dd1fe662985f7997d","name":"images.json","type":"application/json","lastModified":1696002273119.817,"size":612302}] 2f:{"title":"Bonnebladen","cells":[{"id":788,"value":"# Bonnebladen\n\nThis notebook provides a visual overview of the contents of folder _A7.1 Bonnebladen: minuutbladen, aanvullende minuutbladen en bijlagen_ of the archive [NL-HaNA 4.TOPO Topografische Dienst en Rechtsvoorgangers](https://www.nationaalarchief.nl/onderzoeken/archief/4.TOPO) at the Dutch National Archive. The sheets are laid out according to the [sheet index](https://www.nationaalarchief.nl/sites/default/files/afbeeldingen/toegangen/bladwijzer-bonnebladen.jpg) of the original map series.","pinned":false,"hidden":false,"mode":"md"},{"id":292,"value":"viewof goToSheet = Inputs.text({\n label: \"Go to sheet...\",\n submit: true,\n datalist: bonnebladen\n .filter((item) => item.minuten)\n .map((item) => item.sheet + \" \" + item.title)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"$${selectedSheet ? `Selected sheet: ${selectedSheet.sheet} ${selectedSheet.title}${selectedSheet.minuten[0].date ? \" (\" + selectedSheet.minuten[0].date + \")\" : \"(_undated_)\"}.
Open at [National Archives](${selectedSheet.minuten[0].handle}) or in [Allmaps Editor](${allmapsEditorBase + selectedSheet.image + \"/info.json\"}).
_You can change the selection by using the arrow keys_` : `_Click a sheet to select_`}","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"## Change selected sheet","pinned":false,"hidden":false,"mode":"md"},{"id":849,"value":"viewof selectedSeries = Inputs.select(\n selectedSheet ? selectedSheet.minuten : [{ date: \"Please select an image\" }],\n {\n label: \"Series\",\n format: (x) => (x.date ? x.date : \"undated\")\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"viewof selectedImage = Inputs.radio([\"Front\", \"Back\"], {\n label: \"Image\",\n value: \"Front\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"viewof button = Inputs.button(\"Change sheet\", { reduce: () => changeImage() })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"## Observations\n\n- Only the first series of sheet 270 has three images; the rest has two (front and back). [This is the third image of sheet 270](https://www.nationaalarchief.nl/onderzoeken/archief/4.TOPO/invnr/10.270/file/NL-HaNA_4.TOPO_10.270_V_O?eadID=4.TOPO&unitID=10.270&query=) (alternative view of back).\n- Sheet 533 (Nijmegen, first edition) & 491 (Arnhem, first edition) are upside down.\n- Sheet 72 (Vlakte) does not depict anything.\n\nMissing sheets:\n- 583 Moerdijk\n- 586 Elshout\n- 604 Oosterhout\n- 621 Steenbergen\n- 622 Oudenbosch\n- 679 _Unnamed_","pinned":false,"hidden":false,"mode":"md"},{"id":562,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"mutable clickedPoint = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"mutable selectedSheet = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1169,"value":"mutable backOrFront = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"{\n if (clickedPoint) {\n const position = clickedPoint;\n const results = getImagesAtPosition(position);\n if (results.length >= 1) {\n const topLayer = results[0];\n // viewer.viewport.fitBounds(topLayer.box, false);\n createOverlay(topLayer.bounds);\n mutable selectedSheet = topLayer;\n return (\n \"Selected sheet from mouse click: \" +\n topLayer.sheet +\n \" \" +\n topLayer.title\n );\n }\n }\n return \"No sheet clicked\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"{\n if (goToSheet) {\n try {\n const sheet = +goToSheet.split(\" \")[0];\n const index = bonnebladen.findIndex((item) => item.sheet === sheet);\n const bounds = viewer.world.getItemAt(index).getBounds();\n const image = viewer.world.getItemAt(index).source[\"@id\"];\n viewer.viewport.fitBounds(bounds, false);\n createOverlay(bounds);\n mutable selectedSheet = { index, bounds, ...bonnebladen[index], image };\n return (\n \"Selected sheet from input: \" +\n bonnebladen[index].sheet +\n \" \" +\n bonnebladen[index].title\n );\n } catch {\n return \"Could not parse input\";\n }\n } else return \"No sheet selected from input\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"handleKeyPress(pressedKey)","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"height = width * 0.7","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"mutable pressedKey = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1205,"value":"## Georefereren\nDe coordinaten van de hoekpunten van de bladen zijn bekend. Er zijn twee type coordinaten:\n\n1) Cartesiaanse XY coordinaten (in meters) van de kaartprojectie. Het nulpunt van de kaartprojectie ligt ten zuidoosten van Chaam (blad 644 Ulvenhout, rechts onderin). Vanaf dit punt kunnen de geprojecteerde coordinaten van alle hoekpunten worden afgeleid. De maat van de bladen is 10000 bij 6250 meter (40 bij 25 centimeter op schaal 1:25000).","pinned":false,"hidden":false,"mode":"md"},{"id":1288,"value":"originalProjectedTopLeftCoord = {\n if (selectedSheet) {\n let gridCoord = completeMapping.map.get(selectedSheet.sheet);\n // Nulpunt ten zuidoosten van Chaam, op snijpunt van bladen\n let origin = [11, 38];\n let dx = 10000;\n let dy = 6250;\n let x = (gridCoord[0] - origin[0]) * dx;\n let y = (gridCoord[1] - origin[1]) * dy;\n return [x, y];\n } else {\n return \"Selecteer een blad\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":1431,"value":"pixelToMeter = (0.0254 / 300) * 25000","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"Voor de afwijkende bladen kunnen hiermee de afwijkende hoekpunten berekend worden op basis van de bekende hoekpunten (een afwijkend blad is altijd op twee punten verbonden met de bladindeling).\n\nAfwijkende bladen kunnen worden opgespeurd door te kijken naar bladverhoudingen die afwijken van de standaard (40:25 of 1:6). Hieronder de verhouding van het geselecteerde blad:","pinned":false,"hidden":false,"mode":"md"},{"id":1196,"value":"aspectRatio = selectedSheet\n ? selectedSheet.bounds.getAspectRatio()\n : \"Selecteer een blad\"\n// Afwijkende bladen < 1.5 || > 1.7","pinned":false,"hidden":false,"mode":"ojs"},{"id":1468,"value":"Afwijkende bladen bevinden zich meestal aan de randen van de kaart. Daardoor kan worden vastgesteld waar ze verbonden zijn met andere bladen.","pinned":false,"hidden":false,"mode":"md"},{"id":1470,"value":"afwijkendeKaarten = {\n const arr = new Array();\n for (const image of images) {\n const [id, infoJson] = image;\n const [width, height] = [infoJson.width, infoJson.height];\n const aspectRatio = width / height;\n if (aspectRatio <= 1.5 || aspectRatio >= 1.7) {\n let minuten = null;\n const sheet = bonnebladen.filter((i) => {\n const images = i.minuten.filter((m) => m.images[0] === id);\n if (images.length) {\n minuten = images;\n return true;\n } else return false;\n })[0];\n if (sheet) {\n arr.push({ sheet: sheet.sheet, title: sheet.title, minuten });\n }\n }\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1507,"value":"$${afwijkendeKaarten.map((i) => \n \"- Sheet \" + i.sheet + \" (\" + (i.minuten[0].date ? i.minuten[0].date : \"undated\") + \")\"\n).join(\"\\n\")}","pinned":false,"hidden":false,"mode":"md"},{"id":551,"value":"## Constants","pinned":false,"hidden":false,"mode":"md"},{"id":1542,"value":"allmapsEditorBase = \"https://editor.allmaps.org/#/collection?url=\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"scaleFactor = 0.625","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"initialBounds = new OpenSeadragon.Rect(0, 0, 27, 52 * scaleFactor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"images = new Map(await FileAttachment(\"imagesComplete.json\").json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"bonnebladen = {\n const json = await FileAttachment(\"bonnebladen.json\").json();\n return json.filter((item) => item.minuten);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1344,"value":"totalNumberOfImages = bonnebladen.map((item) => item.minuten).flat().length","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"seriesWithThreeImages = bonnebladen\n .map((item) => item.minuten)\n .flat()\n .filter((item) => item.images.length === 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"completeMapping = {\n const map = new Map();\n const reversedMap = new Map();\n for (let i = 1; i <= 776; i++) {\n if (manualMapping.has(i)) {\n map.set(i, manualMapping.get(i));\n reversedMap.set(manualMapping.get(i).toString(), i);\n } else {\n const prevCoords = map.get(i - 1);\n const newCoords = [prevCoords[0] + 1, prevCoords[1]];\n map.set(i, newCoords);\n reversedMap.set(newCoords.toString(), i);\n }\n }\n return { map, reversedMap };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"initialTileSources = {\n // const filteredSheets = bonnebladen.filter((item) => item.minuten);\n const array = [];\n for (const sheet of bonnebladen) {\n // const tileSource = sheet.minuten[0].images[0] + \"/info.json\";\n const tileSource = images.get(sheet.minuten[0].images[0]);\n const coords = completeMapping.map.get(sheet.sheet);\n // Todo: fit to bounds\n // https://openseadragon.github.io/docs/OpenSeadragon.Viewer.html#addTiledImage\n const rect = new OpenSeadragon.Rect(\n coords[0],\n coords[1] * scaleFactor,\n 1,\n scaleFactor\n );\n const westLimburg = [769, 765, 761, 757];\n const fitBoundsPlacement = westLimburg.includes(sheet.sheet)\n ? OpenSeadragon.Placement.TOP_RIGHT\n : OpenSeadragon.Placement.TOP_LEFT;\n array.push({\n tileSource,\n // x: coords[0],\n // y: coords[1] * scaleFactor,\n fitBounds: rect,\n fitBoundsPlacement\n // width: 1\n });\n }\n return array;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1176,"value":"downloadBase = \"https://service.archief.nl/gaf/api/file/v1/default/\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":547,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":868,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"// From: https://codepen.io/iangilman/pen/PqxvgN\ngetImagesAtPosition = (position) => {\n const count = viewer.world.getItemCount();\n const results = [];\n for (var i = 0; i < count; i++) {\n const bounds = viewer.world.getItemAt(i).getBounds();\n if (\n position.x > bounds.x &&\n position.y > bounds.y &&\n position.x < bounds.x + bounds.width &&\n position.y < bounds.y + bounds.height\n ) {\n results.push({\n index: i,\n bounds,\n ...bonnebladen[i],\n image: viewer.world.getItemAt(i).source[\"@id\"]\n });\n }\n }\n return results.reverse();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"getSheetAtPosition = (position) => {\n const coords = [position.x, position.y / scaleFactor];\n return completeMapping.reversedMap.get(coords.toString());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"async function addEverything() {\n // const filteredSheets = bonnebladen.filter((item) => item.minuten);\n for (const sheet of bonnebladen) {\n // const tileSource = sheet.minuten[0].images[0] + \"/info.json\";\n const tileSource = images.get(sheet.minuten[0].images[0]);\n const coords = completeMapping.map.get(sheet.sheet);\n if (viewer) {\n viewer.addTiledImage({\n tileSource,\n x: coords[0],\n y: coords[1] * scaleFactor,\n width: 1\n });\n }\n }\n return bonnebladen.length + \" sheets added to viewer\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"async function getInfoJsons() {\n // const urls = bonnebladen\n // .map((item) => item.minuten)\n // .filter((item) => item)\n // .map((item) => item[0].images[0]);\n const urls = bonnebladen\n .map((item) => item.minuten)\n .flat()\n .map((item) => item.images)\n .flat();\n const map = new Map();\n for (const url of urls) {\n const resp = await fetchJson(url + \"/info.json\");\n map.set(url, resp);\n }\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"createOverlay = (rec) => {\n viewer.clearOverlays();\n const elt = document.createElement(\"div\");\n elt.id = \"overlay\";\n // elt.className = \"highlight\";\n elt.style = \"outline:4px solid blue;\";\n viewer.addOverlay({\n element: elt,\n location: rec\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"fetchJson = (url) => fetch(url).then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"OpenSeadragon = require(\"openseadragon@4.1.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"// proj = require(\"proj4@2.9.2/dist/proj4-src.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}