31:T705,Enter a URL of an item in the [Amsterdam Stadsarchief Beeldbank](https://archief.amsterdam/beeldbank/) or scans overview page of an [archival folder](https://archief.amsterdam/inventarissen/) in the input field below. URLs should look like this: ``` // Beeldbank https://archief.amsterdam/beeldbank/detail/f4b77ddd-5654-df11-c2cf-f37077577b28/... // Archive https://archief.amsterdam/inventarissen/scans/10043/2.9/... ``` Examples: - [Het Noordzee-kanaal](?url=https://archief.amsterdam/beeldbank/detail/fef8badd-a957-380c-ea61-1600e7da1051) - [Plattegrond van Amsterdam met Uitbreidingsplan Berlage](?url=https://archief.amsterdam/beeldbank/detail/684514af-2376-22a1-2820-962022a4e646) - [Kleinschalige basiskaart van Amsterdam 1:25.000](?url=https://archief.amsterdam/beeldbank/detail/d8ea7122-bd16-325e-ed8d-7fb142cd2f83) - [Inrichtingsplan in lichtdruk voor de kermis op de Palmgracht](?url=https://archief.amsterdam/beeldbank/detail/5b79befe-955d-17fc-7778-9458b6970ee6) - [715 Lomanatlas. Schaal 1:1.250](?url=https://archief.amsterdam/inventarissen/scans/10043/2.9) - [31 Kaart met een wederopbouwplan van de Weesperstraat](?url=https://archief.amsterdam/inventarissen/scans/10033/1.7.73/start/0/limit/10/highlight/1) - [1323 Kaart van Amsterdam. Vervaardigd door Dirck Cornelisse Swart](?url=https://archief.amsterdam/inventarissen/scans/10035/1.11) - [1490 Kaarten van het havengebied, 1890-1920](?url=https://archief.amsterdam/inventarissen/scans/5213/1.2.4.3.3) - [94 Regio 35 (oostelijk deel). Schaal 1:1.000](?url=https://archief.amsterdam/inventarissen/scans/10040/1.94/start/0/limit/10/highlight/1) _NB: At the moment, most items from the beeldbank will fail, since the Stadsarchief is renewing its infrastructure. All images from the archival inventories should work however!_32:T906,listOfArchives = [ { name: "10033 Kaarten van stadsgedeelten", url: "https://archief.amsterdam/inventarissen/details/10033" }, { name: "10035 Kaarten van geheel Amsterdam", url: "https://archief.amsterdam/inventarissen/details/10035" }, { name: "5213 Archief van de Dienst der Publieke Werken", url: "https://archief.amsterdam/inventarissen/details/5213" }, { name: "10047 Collectie Stadsarchief Amsterdam: kaart van Amsterdam schaal 1:2.500 Dienst der Publieke Werken", url: "https://archief.amsterdam/inventarissen/details/10047" }, { name: "10056 Bouwtekeningen", url: "https://archief.amsterdam/inventarissen/details/10056" }, { name: "10040 Archief van de Dienst Bouw- en Woningtoezicht: kaarten", url: "https://archief.amsterdam/inventarissen/details/10040" }, { name: "10095 Collectie Atlas Kok", url: "https://archief.amsterdam/inventarissen/details/10095" }, { name: "10043 Negentiende-eeuwse buurtatlaskaarten", url: "https://archief.amsterdam/inventarissen/details/10043" }, { name: "5403 Archief van de Gemeente Nieuwer-Amstel: Bouw- en woningtoezichtdossiers", url: "https://archief.amsterdam/inventarissen/details/5403" }, { name: "10094 Collectie Atlas Dreesmann", url: "https://archief.amsterdam/inventarissen/details/10094" }, { name: "5220 Archief van de Rooimeesters, later Bouwopzichters", url: "https://archief.amsterdam/inventarissen/details/5220" }, { name: "291 Archief van Architectenbureau Baanders", url: "https://archief.amsterdam/inventarissen/details/291" }, { name: "30069 Kaart van Amsterdam schaal 1:2.500", url: "https://archief.amsterdam/inventarissen/details/30069" }, { name: "10042 Topografische Kaart van Nederland, schaal 1:50.000", url: "https://archief.amsterdam/inventarissen/details/10042" }, { name: "10039 Kaart van Amsterdam, Schaal 1:1.000", url: "https://archief.amsterdam/inventarissen/details/10039" }, { name: "30044 Archief van het Kadaster: kaarten", url: "https://archief.amsterdam/inventarissen/details/30044" } // No scans... // { // name: "10001 Collectie Atlas Splitgerber", // url: "https://archief.amsterdam/inventarissen/details/10001" // } ]33:T87b,async function listFiles(folderList, prevIndex) { // Lists files with scans let array = []; if (Array.isArray(folderList)) { for (const [i, item] of folderList.entries()) { const index = prevIndex ? prevIndex + "." + (i + 1).toString() : (i + 1).toString(); if (item.did && item.did.assets && item.did.assets.asset) { const images = await processAssets(item.did.assets.asset, index); array.push({ // ...getMetadata(item.did), title: item.did.unittitle.content, index, folder: item.did.unitid.content, did: item.did, images }); } else if (item.c) { const children = await listFiles(item.c, index); if (children.length > 0) { array.push({ // ...getMetadata(item.did), title: item.did.unittitle.content, index, level: item.level, did: item.did, children: children }); } } } } else if ( folderList.did && folderList.did.assets && folderList.did.assets.asset ) { // If there's only one child, c contains an object instead of an array const index = prevIndex ? prevIndex + "." + "1" : "1"; const images = await processAssets(folderList.did.assets.asset, index); console.log(index + " is an only child"); array.push({ // ...getMetadata(folderList.did), title: folderList.did.unittitle.content, index, folder: folderList.did.unitid.content, level: folderList.level, did: folderList.did, images }); } else if (folderList.c) { // If the object contains additional children const index = prevIndex ? prevIndex + "." + "1" : "1"; const children = await listFiles(folderList.c, index); if (children.length > 0) { console.log(index + " is an only child without children"); array.push({ // ...getMetadata(folderList.did), title: folderList.did.unittitle.content, index, level: folderList.level, did: folderList.did, children: children }); } } return array; }34:T4b2,async function processAssets(assets, path) { if (Array.isArray(assets) && assets.length < 10) { // More than 1 and less than 10 images, use the data in the XML return assets.map((item) => ({ iiif: item.iiif.content, filename: item.name.content })); } else if (Array.isArray(assets) && assets.length >= 10) { // API call(s) to fetch additional images const apiUrl = `https://webservices8.picturae.pro/archives/scans/${ findingAidId + "/" + path }?apiKey=eb37e65a-eb47-11e9-b95c-60f81db16c0e&limit=100`; const apiResponse = await fetchJson(apiUrl); let scans = apiResponse.scans.scans; const scancount = apiResponse.scans.scancount; if (scancount > 100) { for (let i = 100; i < scancount; i += 100) { const moreScans = await fetchJson(apiUrl + "&start=" + i); scans.push(...moreScans.scans.scans); } } const images = scans.map((item) => ({ iiif: item.manifest, filename: item.name })); console.log(path + " has " + images.length + " scans"); return images; } else { // Single image return { iiif: assets.iiif.content, filename: assets.name.content }; } }35:T5b3,imageArray = { if (validateInput === "beeldbank") { let uuid = url.match(/.*detail\/(?[\w-]*)/).groups.uuid; let apiUrl = `https://webservices.memorix.nl/mediabank/media/${uuid}?apiKey=eb37e65a-eb47-11e9-b95c-60f81db16c0e`; let apiResponse = await fetchJson(apiUrl); let assets = apiResponse.media[0].asset; let imageBase = "https://images.memorix.nl/ams/iiif/"; let filteredAssets = assets.filter( (item) => item.mimetype === "image/jp2" && item.isgeotiff === null ); if (filteredAssets.length > 0) { return filteredAssets.map((item) => ({ meta: item, image: imageBase + item.uuid, id: item.dc_title })); } } else if (validateInput === "archief") { let path = url.match(/.*scans\/(?[\d]*\/[\d.]*)/).groups.path; let apiUrl = `https://webservices8.memorix.nl/archives/scans/${path}?apiKey=eb37e65a-eb47-11e9-b95c-60f81db16c0e&limit=100`; let apiResponse = await fetchJson(apiUrl); let scans = apiResponse.scans.scans; let scancount = apiResponse.scans.scancount; if (scancount > 100) { for (let i = 100; i < scancount; i += 100) { let moreScans = await fetchJson(apiUrl + "&start=" + i); scans.push(...moreScans.scans.scans); } } let images = scans.map((item) => ({ meta: item, image: item.manifest && item.manifest.split("/info.json")[0], id: item.name })); return images; } }36:T421,// From: https://observablehq.com/@tophtucker/tree-input function treeInput( tree, { name = getName, children = getChildren, open = 0, value = tree } = {} ) { const id = DOM.uid().id; const form = htl.html``; set(value)(); return form; function set(value) { return function () { form.value = value; form.dispatchEvent(new Event("input", { bubbles: true })); }; } function inner(node, { checked = false, open } = {}) { const item = htl.html` ${name(node)}`; return node.children?.length ? htl.html`

${item}

${children(node).map((d) => inner(d, { open: 0 }))}

` : htl.html`

${item}

`; } }37:[{"id":"c10930a90a8355c089a36f2d4e783f51605a41e2070dd20e949a06b3a718a53555d713e5dd71deb95cf335794ba12c3ef0fc113b4f71d351d15b03da8a1a2fe2","href":"https://static.observableusercontent.com/files/c10930a90a8355c089a36f2d4e783f51605a41e2070dd20e949a06b3a718a53555d713e5dd71deb95cf335794ba12c3ef0fc113b4f71d351d15b03da8a1a2fe2","name":"vele-handen@1.csv","type":"text/csv","lastModified":1638115046823.844,"size":5126792}] 2f:{"title":"Stadsarchief Amsterdam to IIIF Image","cells":[{"id":0,"value":"# Stadsarchief Amsterdam to IIIF Image","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"viewof url = Inputs.text({ label: \"Enter URL\", value: urlUrl || defaultUrl })","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"## Results\n\n_Click image to open in the Allmaps Editor_","pinned":false,"hidden":false,"mode":"md"},{"id":238,"value":"viewof thumbSize = Inputs.range([100, 300], {\n label: \"Thumbnail size\",\n step: 100,\n value: imageArray && imageArray.length > 1 ? 100 : 300\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"$${imageArray ? imageArray.map(item => `

`).join(\"\\n\") : \"_No images found; please check URL_\"}","pinned":false,"hidden":false,"mode":"md"},{"id":288,"value":"Inputs.button(`Copy IIIF Image URIs to clipboard`, {\n value: null,\n reduce: () =>\n navigator.clipboard.writeText(\n imageArray.map((item) => item.image).join(\"\\n\")\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"## Processing EAD XML\nTo obtain an overview of scans in a single archive, the EAD xml can be used. It contains a lists of scans, if available, up to a maximum of 10. The implementation below converts the XML to JSON and filters the content for items containing scans. For items with more than 10 scans, it fetches the full list using the Memorix API.\n\nDue to CORS restrictions, the xml needs to be downloaded from the archival page and uploaded here.\n\nList of archives:\n\n${listOfArchives.map(item => \"- [\" + item.name + \"](\" + item.url + \")\").join(\"\\n\")}\n\nUpload the EAD xml below:","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"viewof eadInput = Inputs.file({\n accept: \".xml\",\n required: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"[${scanTree.title}](${archiveUrl})\n\nSelect a folder from the archive in the three below:","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"viewof selectedFolder = treeInput(scanTree, {\n children: (d) => d.children,\n name: (d) =>\n d.index && d.title ? d.index + \" \" + d.title : !d.index ? d.title : d.index,\n open: 0,\n value: treeInput[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"Settings for the view below:","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"viewof page = Inputs.range([1, listenImagesChunks.length], {\n label: \"Page\",\n step: 1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"viewof pageSize = Inputs.range([50, 200], {\n label: \"Page size\",\n step: 50,\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"viewof thumbSize2 = Inputs.range([100, 300], {\n label: \"Thumbnail size\",\n step: 100,\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"$${listedImages.length} scans found. See thumbnails below (click to open in the Allmaps Editor):","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"Inputs.button(`Copy IIIF Image URIs to clipboard`, {\n value: null,\n reduce: () =>\n navigator.clipboard.writeText(\n listedImages.map((item) => item.iiif).join(\"\\n\")\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"$${listenImagesChunks ? listenImagesChunks[page -1].map(item => `

`).join(\"\\n\") : \"_No images found; please check URL_\"}","pinned":false,"hidden":false,"mode":"md"},{"id":223,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"findingAidId = ead2json.ead.eadheader.eadid.content\n// selectedArchive.url.match(\n// /.*inventarissen\\/details\\/(?[\\w-]*)/\n// ).groups.id","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"archiveUrl = `https://archief.amsterdam/inventarissen/details/${findingAidId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"eadUrl = `https://archief.amsterdam/archives/xml/${findingAidId}.ead.xml`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"ead2json = {\n const xml = await eadInput.xml();\n // const response = await fetch(eadUrl).then((response) => response.text());\n // const parsedResponse = parseXml(response);\n const jsonResponse = domToJSON(xml);\n return jsonResponse;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"scanTree = ({\n did: ead2json.ead.archdesc.did,\n title: ead2json.ead.archdesc.did.unittitle.content,\n children: await listFiles(ead2json.ead.archdesc.dsc.c)\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"function listImages(selectedFolder) {\n let array = [];\n if (selectedFolder.children) {\n for (const child of selectedFolder.children) {\n const results = listImages(child);\n array.push(results);\n }\n } else if (selectedFolder.images) {\n if (Array.isArray(selectedFolder.images)) {\n for (const image of selectedFolder.images) {\n array.push({\n iiif: image.iiif.split(\"/info.json\")[0],\n filename: image.filename,\n path: selectedFolder.index,\n folder: selectedFolder.folder,\n title: selectedFolder.title\n });\n }\n } else {\n array.push({\n iiif: selectedFolder.images.iiif.split(\"/info.json\")[0],\n filename: selectedFolder.images.filename,\n path: selectedFolder.index,\n folder: selectedFolder.folder,\n title: selectedFolder.title\n });\n }\n }\n return array.flat();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"listedImages = listImages(selectedFolder)","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"listenImagesChunks = {\n const arr = listedImages;\n const chunkSize = pageSize;\n let chunks = [];\n\n for (let i = 0; i < arr.length; i += chunkSize) {\n const chunk = arr.slice(i, i + chunkSize);\n chunks.push(chunk);\n }\n return chunks;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"function groupBy(objectArray, property) {\n return objectArray.reduce((acc, obj) => {\n const key = obj[property];\n const curGroup = acc[key] ?? [];\n\n return { ...acc, [key]: [...curGroup, obj] };\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"imagesGroupedByFolder = groupBy(listedImages, \"folder\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"## Vele Handen\n_WIP to convert data_","pinned":false,"hidden":false,"mode":"md"},{"id":210,"value":"viewof selectedImage = Inputs.range([1, imageArray.length], {\n label: \"Select image\",\n step: 1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"__Open in [Allmaps Viewer](https://viewer.allmaps.org/#data=data:application/json,${encodeURIComponent(JSON.stringify(annotation))})__.","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"imageInfo = fetch(imageArray[selectedImage - 1].image + \"/info.json\").then(\n (response) => response.json()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"memorixId = imageArray[selectedImage - 1].id","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"rows = veleHandenData.filter(({ memorix_id }) => memorix_id === memorixId)","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"imageWidth = imageInfo.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"imageHeight = imageInfo.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"gcps = rows\n .map(({ gcps }) => JSON.parse(gcps))\n .map(({ imageGeoLat, imageGeoLng, geoLat, geoLng }) => ({\n world: [parseFloat(geoLng), parseFloat(geoLat)],\n image: [parseFloat(imageGeoLng), parseFloat(imageGeoLat)]\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"fullPixelMask = (width, height) => [\n [0, 0],\n [0, height],\n [width, height],\n [width, 0],\n [0, 0]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"map = ({\n version: 1,\n gcps,\n image: {\n type: \"ImageService2\",\n uri: imageArray[0].image,\n width: imageWidth,\n height: imageHeight\n },\n pixelMask: fullPixelMask(imageWidth, imageHeight)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"annotation = annotationParser.generateAnnotation([map])","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"## Docs\n\n_The following examples stopped working:_\n- [Atlas Loman, Buurt U, 4e blad. Schaal 1:1.250](?url=https://archief.amsterdam/beeldbank/detail/2a2d30bb-08a7-550a-4e45-a7f66a73334d)\n- [Het complex van het Sint-Pieters-gasthuis en directe omgeving](?url=https://archief.amsterdam/beeldbank/detail/e861577e-9dc4-e9a3-3ffd-982b3c95452f)\n- [Kaart van Amsterdam met de openbare tram-, autobus- en veerlijnen](?url=https://archief.amsterdam/beeldbank/detail/f28cc64a-be8d-10ba-ce6e-2f0a44e97091)\n- [Die vermaerde Coopstadt van Amstelredam](?url=https://archief.amsterdam/beeldbank/detail/61bd22c8-eec1-7679-1f71-a545f8cf3e09)\n-[Plan tot uitbreiding van Amsterdam. ontwerp: v. Niftrik 1866](?url=https://archief.amsterdam/beeldbank/detail/37a62c95-da9b-453c-2ca2-00a66c388048)\n- [Kaart van Amsterdam getekend in vogelvlucht](?url=https://archief.amsterdam/beeldbank/detail/b7f36ee8-444b-5cab-0e6c-5c707aaedb70)\n\n_Memorix API documentation:_\n\nhttp://demo.webservices.picturae.pro/docs/v2mediabank/recipes-and-ingredients/","pinned":false,"hidden":false,"mode":"md"},{"id":198,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":197,"value":"validateInput = url.includes(\"https://archief.amsterdam/inventarissen/scans/\")\n ? \"archief\"\n : url.includes(\"https://archief.amsterdam/beeldbank/detail/\")\n ? \"beeldbank\"\n : false","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"imageArray.map((item) => item.image)","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"fetchJson = (url) => fetch(url).then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"_For parsing XML_","pinned":false,"hidden":false,"mode":"md"},{"id":192,"value":"parser = new DOMParser()","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"parseXml = (xmlText) => parser.parseFromString(xmlText, \"text/xml\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"// Source: https://observablehq.com/@visnup/xml-to-json\nfunction domToJSON(node) {\n let obj = Object.create(null);\n if (node.children.length === 0 && node.innerHTML) {\n obj.content = node.innerHTML;\n }\n\n const counts = childCounts(node);\n\n for (const child of node.children) {\n const { localName } = child;\n if (counts[localName] > 1) {\n (obj[localName] = obj[localName] || []).push(domToJSON(child));\n } else {\n obj[localName] = domToJSON(child);\n }\n }\n\n let attrs = node.attributes;\n if (attrs) {\n for (let i = attrs.length - 1; i >= 0; i--) {\n obj[attrs[i].name] = attrs[i].value;\n }\n }\n\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"childCounts = (node) => {\n const counts = {};\n for (const { localName } of node.children)\n counts[localName] = (counts[localName] || 0) + 1;\n return counts;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"annotationParser = import('@allmaps/annotation')","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"veleHandenData = FileAttachment(\"vele-handen@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"getName = (d) => d.name","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"getChildren = (d) => d.children","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"## Constants","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"defaultUrl = 'https://archief.amsterdam/beeldbank/detail/fef8badd-a957-380c-ea61-1600e7da1051'","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"urlUrl = new URLSearchParams(html``.search).get('url')","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"editorBaseUrl = \"https://editor.allmaps.org/#/collection?url=\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}