28:null 29:["$","title",null,{"children":"IIIF Image API tile pyramid | Allmaps | Observable"}] 2e:Tee3,imageViewer = { const viewportWidth = width / 2; const viewportHeight = width / 2; const svg = d3 .create("svg") .attr("viewBox", [0, 0, viewportWidth, viewportHeight]) .attr("width", "100%") .attr("height", "100%") .style("background", "black"); const maxDimension = Math.max(scaleFactors[0].height, scaleFactors[0].width); const scaleFactor = viewportWidth / maxDimension; const maxScaleFactor = scaleFactors[0].scaleFactor; const tiler = d3 .tile() .tileSize(tileWidth) .extent([ [0, 0], [viewportWidth, viewportHeight] ]) .zoomDelta(devicePixelRatio - 1); let image = svg.append("g").attr("pointer-events", "none").selectAll("image"); const zoom = d3 .zoom() .scaleExtent([ tileWidth / 2, // More than 1.4 will load the next layer, which doesn't exist (tileWidth * maxScaleFactor * 1.4) / devicePixelRatio ]) .extent([ [0, 0], [viewportWidth, viewportHeight] ]) .on("zoom", (event) => zoomed(event.transform)); const tileGroup = svg .append("g") .attr("pointer-events", "none") .attr("font-family", "var(--sans-serif)") .attr("font-size", 20); let tile = tileGroup.selectAll("g"); // Center image in initial viewport let yOffset = 0; let xOffset = 0; if (resourceHeight > resourceWidth) { // Portrait const width = viewportHeight / aspectRatio; xOffset = (viewportWidth - width) / 2; } else { // Landscape const height = viewportWidth * aspectRatio; yOffset = (viewportHeight - height) / 2; } svg .call(zoom) .call( zoom.transform, d3.zoomIdentity .translate( (tileWidth / 2) * scaleFactor + xOffset, (tileWidth / 2) * scaleFactor + yOffset ) .scale(tileWidth * scaleFactor) ); function zoomed(transform) { const tiles = tiler(transform); const currentScaleFactor = scaleFactors[tiles[0][2]]; mutable transform = transform; tileGroup.attr( "transform", ` scale(${tiles.scale}) translate(${tiles.translate.join(",")}) ` ); if (currentScaleFactor) { const { rows, columns, scaleFactor } = currentScaleFactor; // Remove tiles outside pyramid const visibleTiles = tiles.filter(([x, y]) => x < columns && y < rows); // Highlight tiles in pyramid highlightTiles(visibleTiles, currentScaleFactor, tileGroup); mutable tiles = visibleTiles; // Update tiles in zoom view tile = tile .data(visibleTiles, (d) => d) .join( (enter) => enter .append("g") .attr( "transform", ([x, y]) => `translate(${x}, ${y}) scale(${1 / tileWidth})` ) .call((g) => g.append("image").attr("xlink:href", getTileUrl)) .call((g) => g .append("rect") .attr("fill", "none") .attr("class", ([x, y, z]) => `tile-${x}-${y}-${z}`) // .attr("stroke", "blue") .attr("width", ([x, y]) => x === columns - 1 ? Math.ceil(resourceWidth / scaleFactor - x * tileWidth) : tileWidth ) .attr("height", ([x, y]) => y === rows - 1 ? Math.ceil(resourceHeight / scaleFactor - y * tileHeight) : tileHeight ) ) // .call((g) => // g // .append("text") // .attr("x", "0.4em") // .attr("y", "1.2em") // .text((d) => d.join("/")) // ) ); } } return svg; }2f:T1324,isometricPyramid = { // Bert's sketch: https://www.tldraw.com/f/B5nQATHV-5Y67fmOACk1A let svg = d3.create("svg").attr("width", "100%").style("background", "white"); // Defs element to add filters to const defs = svg.append("defs"); // const bg = svg.append("rect"); const tileGroup = svg.append("g"); const bboxGroup = svg.append("g"); // From: https://www.petercollingridge.co.uk/tutorials/svg/isometric-projection/ const matrix = new DOMMatrix([0.707, 0.409, -0.707, 0.409, 0, -0.816]); let xOffset = 0; let yOffset = 0; let center; let viewbox; let margin; let filter; // Reverse looping over scale factors for (let i = scaleFactors.length - 1; i >= 0; i--) { const { z, width, height } = scaleFactors[i]; // Corner coordinates const coords = [ [0, 0], [width, 0], [width, height], [0, height] ]; // Transforming corner coordinates const [topLeft, topRight, bottomRight, bottomLeft] = coords.map(([x, y]) => new DOMPoint(x, y).matrixTransform(matrix) ); // Bounding box as rect const rect = new DOMRect( bottomLeft.x, topLeft.y, topRight.x - bottomLeft.x, bottomRight.y - topLeft.y ); if (!viewbox) { // Set viewport to largest scale factor viewbox = rect; center = bottomRight; margin = Math.max(width, height) * 0.05; filter = margin / 2; } else { // Set offsets // yOffset = -Math.max(viewbox.height, viewbox.width) * 0.1; // yOffset = viewbox.y - rect.height; rect.y += yOffset; // Optional horizontal offset to align bottom right corners // xOffset = center.x - bottomRight.x; // rect.x += xOffset; // Update viewbox for each subsequent scale factor viewbox.height = viewbox.height + (viewbox.y - rect.y); viewbox.y = rect.y; } // Add drop shadow filter for current layer defs .append("filter") .attr("id", `drop-shadow-${z}`) .attr("x", "-20%") .attr("y", "-20%") .attr("width", "150%") .attr("height", "150%") .append("feDropShadow") .attr("dx", filter) .attr("dy", filter) .attr("stdDeviation", filter) .attr("flood-color", "black"); const levelGroup = tileGroup .append("g") .attr("id", `layer-${z}`) .attr("class", "layer") .attr("transform", `translate(${xOffset} ${yOffset}) ${matrix}`) .attr("filter", dropShadow === "Yes" ? `url(#drop-shadow-${z})` : "") .datum(z); filter /= 1.5; // Add vertical offset for next iteration yOffset -= Math.max(height, width) * 0.1; // Render bbox // bboxGroup // .append("rect") // .attr("x", rect.x) // .attr("y", rect.y) // .attr("width", rect.width) // .attr("height", rect.height) // .attr("fill", "none") // .attr("stroke", "blue") // .attr("stroke-width", 50); // Todo: change this to element if possible levelGroup .append("image") .attr("width", width) .attr("height", height) .attr("xlink:href", thumbnail); // From: https://observablehq.com/@martin-pi/zoomable-pannable-svg-grid-patterns const gridColor = "white"; // Todo: calculate stroke width // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/vector-effect const strokeWidth = "50"; var pattern = levelGroup .append("pattern") .attr("id", "grid-pattern") .attr("patternUnits", "userSpaceOnUse") .attr("x", 0) .attr("y", 0) .attr("width", tileWidth) .attr("height", tileHeight); pattern .append("line") .attr("stroke", gridColor) .attr("stroke-width", strokeWidth) .attr("x1", 0) .attr("y1", tileHeight) .attr("x2", tileWidth) .attr("y2", tileHeight); pattern .append("line") .attr("stroke", gridColor) .attr("stroke-width", strokeWidth) .attr("x1", tileWidth) .attr("y1", 0) .attr("x2", tileWidth) .attr("y2", tileHeight); levelGroup .append("rect") .attr("class", "pattern") .attr("fill", "url(#grid-pattern)") .attr("width", width) .attr("height", height); } // Render vertical line through bottom right corner(s) // svg // .append("line") // .attr("stroke", "blue") // .attr("stroke-width", 50) // .attr("x1", center.x) // .attr("y1", viewbox.y) // .attr("x2", center.x) // .attr("y2", viewbox.y + viewbox.height); viewbox.x -= margin; viewbox.y -= margin; viewbox.width += margin * 2; viewbox.height += margin * 2; // bg.attr("x", viewbox.x) // .attr("y", viewbox.y) // .attr("fill", "lightgray") // .attr("width", "100%") // .attr("height", "100%"); svg.attr("viewBox", [viewbox.x, viewbox.y, viewbox.width, viewbox.height]); return svg; }30:T82f,highlightTiles = (tiles, activeScaleFactor, tileGroup) => { // Remove selected tiles const pyramid = isometricPyramid; pyramid.selectAll(".pattern").attr("fill", "url(#grid-pattern)"); pyramid.selectAll(".tiles").remove(); // Add new selected tiles const { z, scaleFactor, rows, columns } = activeScaleFactor; function highlightTile(event) { const element = d3.select(this); const [x, y, z] = element.datum(); element .transition() .duration("200") .attr( "fill", event.type === "mouseover" ? "white" : "rgba(255,255,255,0.7)" ); tileGroup .select(`.tile-${x}-${y}-${z}`) .transition() .duration("200") .attr( "fill", event.type === "mouseover" ? "rgba(255,255,255,0.7)" : "none" ); } // Change layer opacity if (z > 0) { pyramid .selectAll(".layer") .filter((d) => d < z) .style("pointer-events", "none") .transition() .duration("50") .attr("opacity", 0.2); } pyramid .select(`#layer-${z}`) .attr("opacity", 1) .style("pointer-events", "auto"); // Highlight tiles if (highlight === "Level") { pyramid .select(`#layer-${z}`) .select(".pattern") .attr("fill", "rgba(0,0,255,0.7)"); } else { pyramid .select(`#layer-${z}`) .selectAll(".tiles") .data(tiles) .join("a") .attr("href", getTileUrl) .attr("class", "tiles") .attr("target", "_blank") .append("rect") .attr("x", ([x, y]) => x * tileWidth) .attr("y", ([x, y]) => y * tileHeight) .attr("width", ([x, y]) => x === columns - 1 ? Math.ceil(resourceWidth / scaleFactor - x * tileWidth) : tileWidth ) .attr("height", ([x, y]) => y === rows - 1 ? Math.ceil(resourceHeight / scaleFactor - y * tileHeight) : tileHeight ) .attr("fill", "rgba(255,255,255,0.7)") .attr("class", "tiles") .on("mouseover", highlightTile) .on("mouseout", highlightTile); } return tiles; }31:T44e,getTileUrl = (coord) => { const [x, y, z] = coord; // Ported from: https://iiif.io/api/image/3.0/implementation/ // Calculate region parameters /xr,yr,wr,hr/ const id = tileSource.id || tileSource["@id"]; const context = tileSource?.["@context"]; const scale = scaleFactors[z].scaleFactor; if (scale < 1) { return null; } const xr = x * tileWidth * scale; const yr = y * tileHeight * scale; let wr = tileWidth * scale; if (xr + wr > resourceWidth) { wr = resourceWidth - xr; } let hr = tileHeight * scale; if (yr + hr > resourceHeight) { hr = resourceHeight - yr; } // Calculate size parameters /ws,hs/ let ws = tileWidth; if (xr + tileWidth * scale > resourceWidth) { ws = Math.ceil((resourceWidth - xr) / scale); } let hs = tileHeight; if (yr + tileHeight * scale > resourceHeight) { hs = Math.ceil((resourceHeight - yr) / scale); } if (context === "http://iiif.io/api/image/2/context.json") { return `${id}/${xr},${yr},${wr},${hr}/${ws},/0/default.jpg`; } return `${id}/${xr},${yr},${wr},${hr}/${ws},${hs}/0/default.jpg`; }32:T6b1,exampleTileSources = [ { title: "The Night Watch", collection: "Rijksmuseum", url: "https://www.rijksmuseum.nl/nl/collectie/object/De-Nachtwacht--3137deb45cd7765f9a76084a16c99544", imageId: "https://iiif.micr.io/hsdOg" }, { title: "The Night Watch, extreme version", collection: "Rijksmuseum", url: "https://www.rijksmuseum.nl/nl/stories/operatie-nachtwacht/story/ultra-hoge-resolutie-foto", imageId: "https://iiif.micr.io/ERwIn" }, { title: "Van Berckenrodekaart", collection: "University of Amsterdam", url: "https://github.com/amsterdamtimemachine/berckenrode-iiif", imageId: "https://amsterdamtimemachine.github.io/berckenrode-iiif/KZL_W_X_020" }, { title: "Map of the Liberty of Bruges", collection: "Groeningemuseum", url: "https://www.museabrugge.be/en/collection/work/id/0000_gro0438_i", imageId: "https://manuelclaeysbouuaert.be/claeissens/img" }, { title: "Railway bridge Hollands Diep", collection: "TU Delft", url: "https://heritage.tudelft.nl/objects/1f5e8ccd-8582-47e0-b688-0894b98354a6", imageId: "https://dlc.services/iiif-img/7/18/8e152582-1053-43db-8530-1e767e583b1f" }, { title: "Piramide di C. Cestio", collection: "Ghent University Library", url: "https://lib.ugent.be/catalog/rug01:001650470", imageId: "https://adore.ugent.be/IIIF/images/archive.ugent.be%3A5BC61060-5C65-11E1-824B-C3713B7C8C91%3ADS.2" }, { title: "Non-square tiles example", collection: "Princeton University Library", url: "https://dpul.princeton.edu/catalog/7d278t10z", imageId: "https://iiif.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000001.jp2" } ]33:[] 2c:{"id":"31f4cd9ccc223a57","slug":"tile-pyramid","title":"IIIF Image API tile pyramid","thumbnail":"840852d16020b4caaced5916d2d071d6935ea87cea8cebd3d0a0958cb6603024","access_level":"public","create_time":"$D2025-02-15T14:15:20.749Z","update_time":"$D2025-12-18T10:53:03.791Z","view_time":null,"first_public_time":"$D2025-03-14T10:36:46.183Z","has_unpublished_edits":null,"fork":{"id":"c8f64263e30ba1d6","slug":"zoomable-tiles","title":"Zoomable Tiles","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":11,"starred":false,"owner":{"type":"team","id":"8917b8f0b5bcd50a","login":"allmaps","name":"Allmaps","avatar_url":"https://avatars-next.observableusercontent.com/558e397531ba56d7134b2879485d93fba9d27c9b932e520cb72bea9bdd4133c7","tier":"starter_2024"},"version":2662,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f444e659497ac4e5","login":"sammeltassen","name":"Jules Schoonman","avatar_url":"https://avatars-next.observableusercontent.com/d8e1e715f8e8560d0970b3d60336fe11ce634dd18ec4107ab6e99022494e616c","tier":null}],"members":[{"type":"team","id":"8917b8f0b5bcd50a","login":"allmaps","name":"Allmaps","avatar_url":"https://avatars-next.observableusercontent.com/558e397531ba56d7134b2879485d93fba9d27c9b932e520cb72bea9bdd4133c7","tier":"starter_2024","role":"editor"},{"type":"individual","id":"f444e659497ac4e5","login":"sammeltassen","name":"Jules Schoonman","avatar_url":"https://avatars-next.observableusercontent.com/d8e1e715f8e8560d0970b3d60336fe11ce634dd18ec4107ab6e99022494e616c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"IIIF Image API tile pyramid","cells":[{"id":0,"value":"# IIIF Image API tile pyramid\n\nVisualization of the tile pyramid of a [IIIF Image](https://iiif.io/api/image/3.0/). Made using [d3-tile](https://github.com/d3/d3-tile), with [d3-zoom](https://github.com/d3/d3-zoom).\n\nLoad your own IIIF Image:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":400,"value":"viewof tileSourceUrl = Inputs.text({\n label: \"IIIF Image API endpoint\",\n value: initialTileSourceUrl\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1920,"value":"Or try one of these examples:\n\n${exampleTileSources.map(source => `- [${source.title}](#${source.imageId}) ([${source.collection}](${source.url}))`).join(\"\\n\")}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1875,"value":"Sometimes the tiles are too small to render, in which case you can choose to highlight the zoom levels instead:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1629,"value":"viewof highlight = Inputs.radio([\"Tiles\", \"Level\"], {\n label: \"What to highlight?\",\n value: \"Tiles\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2581,"value":"viewof dropShadow = Inputs.radio([\"Yes\", \"No\"], {\n label: \"Add drop shadow?\",\n value: \"No\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"viz = html`\n

${imageViewer.node()}

${isometricPyramid.node()}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1772,"value":"## Scale factors\n\nSometimes the `info.json` response contains additional scale factors or accidentally [omits](https://github.com/lovell/sharp/issues/4346) a factor. By default, this notebook calculates the expected scale factors but you can also use those from the `info.json`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1780,"value":"viewof scaleFactorInput = Inputs.radio([\"Calculated\", \"From info.json\"], {\n label: \"Source for scale factors\",\n value: \"Calculated\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1882,"value":"**Overview of the scale factors**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1716,"value":"viewof table = Inputs.table(scaleFactors, {\n format: {\n z: (d) => (activeScaleFactor?.z === d ? html`📍 ${d}` : d)\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1730,"value":"_Tilesize: ${tileWidth} x ${tileHeight} px_
\n_Total number of tiles for this image: ${scaleFactors.tileCount.toLocaleString()}_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1719,"value":"md`**Active ${tiles.length > 1 ? \"tiles\" : \"tile\"}**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2511,"value":"viewof table2 = Inputs.table(\n tiles.map((tile) => {\n const params = getTileParams(tile);\n const [x, y] = tile;\n const tileUrl = getTileUrl(tile);\n return {\n Tile: `

`,\n Row: x + 1,\n Column: y + 1,\n \"Region (x)\": params.xr,\n \"Region (y)\": params.yr,\n \"Region (width)\": params.wr,\n \"Region (height)\": params.hr,\n \"Size (width)\": params.ws,\n \"Size (height)\": params.hs\n };\n }),\n {\n format: {\n Tile: (d) => html`${d}`\n },\n width: {\n Tile: \"100px\"\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2563,"value":"## Download\nUse the button below to download an SVG of the tile pyramid.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2568,"value":"{\n const clonedSvg = isometricPyramid.node().cloneNode(true);\n const svg = d3\n .select(clonedSvg)\n .call((svg) => svg.selectAll(\".pattern\").attr(\"fill\", \"url(#grid-pattern)\"))\n .call((svg) => svg.selectAll(\".tiles\").remove())\n .call((svg) => svg.selectAll(\".layer\").attr(\"opacity\", 1))\n .node();\n return DOM.download(serialize(svg), `pyramid.svg`, `Download SVG`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2546,"value":"## Embedding\n\nTo embed the visualization with a custom tile source, add the tile source as the value of a `url` query parameter. The height of the visualization should be `0.5 * width + 100px`.\n\n```html\n\n\n```\n\nThis code (without the parameter) can also be found when clicking the three dots next to the cell.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1408,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"mutable tiles = undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"mutable transform = undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1983,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1662,"value":"scaleFactors = {\n const scaleFactors =\n scaleFactorInput === \"Calculated\"\n ? getScaleFactors(\n resourceWidth,\n resourceHeight,\n tileWidth,\n tileHeight\n )\n : tileSource?.tiles?.[0]?.scaleFactors;\n const arr = new Array();\n for (const [index, scaleFactor] of scaleFactors.slice().reverse().entries()) {\n const z = index;\n const width = Math.ceil(resourceWidth / scaleFactor);\n const height = Math.ceil(resourceHeight / scaleFactor);\n const rows = Math.ceil(resourceHeight / scaleFactor / tileHeight);\n const columns = Math.ceil(resourceWidth / scaleFactor / tileWidth);\n const tileCount = rows * columns;\n arr.push({\n z,\n scaleFactor,\n width,\n height,\n rows,\n columns,\n tileCount\n });\n }\n arr.tileCount = arr.reduce((acc, i) => acc + i.tileCount, 0);\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2072,"value":"// https://stackoverflow.com/questions/18650168/convert-blob-to-base64/18650249#18650249\nfunction imgToBase64(url) {\n return fetch(url)\n .then((resp) => resp.blob())\n .then(\n (blob) =>\n new Promise((resolve, _) => {\n const reader = new FileReader();\n reader.onloadend = () => resolve(reader.result);\n reader.readAsDataURL(blob);\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2661,"value":"{\n const z =\n scaleFactors.filter((i) => i.tileCount === 1).reverse()?.[0]?.z || 0;\n const tileUrl = getTileUrl([0, 0, z]);\n return tileUrl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1965,"value":"thumbnail = {\n // Get the largest upper tile\n const z =\n scaleFactors.filter((i) => i.tileCount === 1).reverse()?.[0]?.z || 0;\n const tileUrl = getTileUrl([0, 0, z]);\n return imgToBase64(tileUrl);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1692,"value":"activeScaleFactor = scaleFactors[tiles?.[0]?.[2]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2406,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"function getScaleFactors(resourceWidth, resourceHeight, tileWidth, tileHeight) {\n // Get the largest dimension\n const maxResourceDimension = Math.max(resourceWidth, resourceHeight);\n // Presuming that non-square tiles follow the aspect ratio of the image\n const maxTileDimension = Math.max(tileWidth, tileHeight);\n\n // How many times do we need to divide the image in half to fit within a single tile?\n // resourceSize / 2 ** x = tileSize\n const divisions = Math.ceil(\n Math.log2(maxResourceDimension / maxTileDimension)\n );\n\n // Return an array of scalefactors, including the full image (scale factor 1 or 2 ** 0)\n // Similar to info.json\n return [...Array(divisions + 1)].map((_, i) => 2 ** i);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"getTileParams = (coord) => {\n const [x, y, z] = coord;\n // Ported from: https://iiif.io/api/image/3.0/implementation/\n // Calculate region parameters /xr,yr,wr,hr/\n const id = tileSource.id || tileSource[\"@id\"];\n const scale = scaleFactors[z].scaleFactor;\n if (scale < 1) {\n return null;\n }\n const xr = x * tileWidth * scale;\n const yr = y * tileHeight * scale;\n let wr = tileWidth * scale;\n if (xr + wr > resourceWidth) {\n wr = resourceWidth - xr;\n }\n let hr = tileHeight * scale;\n if (yr + hr > resourceHeight) {\n hr = resourceHeight - yr;\n }\n // Calculate size parameters /ws,hs/\n let ws = tileWidth;\n if (xr + tileWidth * scale > resourceWidth) {\n ws = Math.ceil((resourceWidth - xr) / scale);\n }\n let hs = tileHeight;\n if (yr + tileHeight * scale > resourceHeight) {\n hs = Math.ceil((resourceHeight - yr) / scale);\n }\n return { xr, yr, wr, hr, ws, hs };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"## Tilesource","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"fetchJson = (url) => fetch(url).then((resp) => resp.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1957,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"initialTileSourceUrl = hash.slice(1) ||\n urlParam ||\n exampleTileSources[0].imageId","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2538,"value":"urlParam = new URLSearchParams(location.search).get(\"url\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1898,"value":"hash = Generators.observe((notify) => {\n // From: https://observablehq.com/@jashkenas/url-querystrings-and-hash-parameters\n const hashchange = () => notify(location.hash);\n hashchange();\n addEventListener(\"hashchange\", hashchange);\n return () => removeEventListener(\"hashchange\", hashchange);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"tileSource = fetchJson(\n tileSourceUrl.includes(\"/info.json\")\n ? tileSourceUrl\n : tileSourceUrl.slice(-1) === \"/\"\n ? tileSourceUrl + \"info.json\"\n : tileSourceUrl + \"/info.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"resourceWidth = tileSource.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"resourceHeight = tileSource.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1448,"value":"defaultTileSize = 1024","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"tileWidth = tileSource?.tiles?.[0]?.width || defaultTileSize","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"tileHeight = tileSource?.tiles?.[0]?.height || tileWidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"aspectRatio = tileSource.height / tileSource.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2553,"value":"import { serialize } from \"@kelleyvanevert/little-things\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2d:"$2c:body"