2b:null 2c:["$","title",null,{"children":"Campus Atlas v2 | TU Delft Library | Observable"}] 31:T2b11,leafletIIIF = { if (L) { /* * Leaflet-IIIF 3.0.0 * IIIF Viewer for Leaflet * by Jack Reed, @mejackreed */ L.TileLayer.Iiif = L.TileLayer.extend({ options: { continuousWorld: true, tileSize: 256, updateWhenIdle: true, tileFormat: "jpg", fitBounds: true, setMaxBounds: false }, initialize: function (url, options) { options = typeof options !== "undefined" ? options : {}; if (options.maxZoom) { this._customMaxZoom = true; } // Check for explicit tileSize set if (options.tileSize) { this._explicitTileSize = true; } // Check for an explicit quality if (options.quality) { this._explicitQuality = true; } options = L.setOptions(this, options); this._infoPromise = null; this._infoUrl = url; this._baseUrl = this._templateUrl(); this._getInfo(); }, getTileUrl: function (coords) { var _this = this, x = coords.x, y = coords.y, zoom = _this._getZoomForUrl(), scale = Math.pow(2, _this.maxNativeZoom - zoom), tileBaseSize = _this.options.tileSize * scale, minx = x * tileBaseSize, miny = y * tileBaseSize, maxx = Math.min(minx + tileBaseSize, _this.x), maxy = Math.min(miny + tileBaseSize, _this.y); var xDiff = maxx - minx; var yDiff = maxy - miny; // Canonical URI Syntax for v2 var size = Math.ceil(xDiff / scale) + ","; if (_this.type === "ImageService3") { // Cannonical URI Syntax for v3 size = size + Math.ceil(yDiff / scale); } return L.Util.template( this._baseUrl, L.extend( { format: _this.options.tileFormat, quality: _this.quality, region: [minx, miny, xDiff, yDiff].join(","), rotation: 0, size: size }, this.options ) ); }, onAdd: function (map) { var _this = this; // Wait for info.json fetch and parse to complete Promise.all([_this._infoPromise]) .then(function () { // Store unmutated imageSizes _this._imageSizesOriginal = _this._imageSizes.slice(0); // Set maxZoom for map map._layersMaxZoom = _this.maxZoom; // Call add TileLayer L.TileLayer.prototype.onAdd.call(_this, map); // Set minZoom and minNativeZoom based on how the imageSizes match up var smallestImage = _this._imageSizes[0]; var mapSize = _this._map.getSize(); var newMinZoom = 0; // Loop back through 5 times to see if a better fit can be found. for (var i = 1; i <= 5; i++) { if (smallestImage.x > mapSize.x || smallestImage.y > mapSize.y) { smallestImage = smallestImage.divideBy(2); _this._imageSizes.unshift(smallestImage); newMinZoom = -i; } else { break; } } _this.options.minZoom = newMinZoom; _this.options.minNativeZoom = newMinZoom; _this._prev_map_layersMinZoom = _this._map._layersMinZoom; _this._map._layersMinZoom = newMinZoom; if (_this.options.fitBounds) { _this._fitBounds(); } if (_this.options.setMaxBounds) { _this._setMaxBounds(); } // Reset tile sizes to handle non 256x256 IIIF tiles _this.on("tileload", function (tile, url) { var height = tile.tile.naturalHeight, width = tile.tile.naturalWidth; // No need to resize if tile is 256 x 256 if (height === 256 && width === 256) return; tile.tile.style.width = width + "px"; tile.tile.style.height = height + "px"; }); }) .catch(function (err) { console.error(err); }); }, onRemove: function (map) { var _this = this; map._layersMinZoom = _this._prev_map_layersMinZoom; _this._imageSizes = _this._imageSizesOriginal; // Remove maxBounds set for this image if (_this.options.setMaxBounds) { map.setMaxBounds(null); } // Call remove TileLayer L.TileLayer.prototype.onRemove.call(_this, map); }, _fitBounds: function () { var _this = this; // Find best zoom level and center map var initialZoom = _this._getInitialZoom(_this._map.getSize()); var offset = _this._imageSizes.length - 1 - _this.options.maxNativeZoom; var imageSize = _this._imageSizes[initialZoom + offset]; var sw = _this._map.options.crs.pointToLatLng( L.point(0, imageSize.y), initialZoom ); var ne = _this._map.options.crs.pointToLatLng( L.point(imageSize.x, 0), initialZoom ); var bounds = L.latLngBounds(sw, ne); _this._map.fitBounds(bounds, true); }, _setMaxBounds: function () { var _this = this; // Find best zoom level, center map, and constrain viewer var initialZoom = _this._getInitialZoom(_this._map.getSize()); var imageSize = _this._imageSizes[initialZoom]; var sw = _this._map.options.crs.pointToLatLng( L.point(0, imageSize.y), initialZoom ); var ne = _this._map.options.crs.pointToLatLng( L.point(imageSize.x, 0), initialZoom ); var bounds = L.latLngBounds(sw, ne); _this._map.setMaxBounds(bounds, true); }, _getInfo: function () { var _this = this; _this._infoPromise = fetch(_this._infoUrl) .then(function (response) { return response.json(); }) .catch(function (err) { console.error(err); }) .then(function (data) { _this.y = data.height; _this.x = data.width; var tierSizes = [], imageSizes = [], scale, width_, height_, tilesX_, tilesY_; // Set quality based off of IIIF version if (data.profile instanceof Array) { _this.profile = data.profile[0]; } else { _this.profile = data.profile; } _this.type = data.type; _this._setQuality(); // Unless an explicit tileSize is set, use a preferred tileSize if (!_this._explicitTileSize) { // Set the default first _this.options.tileSize = 256; if (data.tiles) { // Image API 2.0 Case _this.options.tileSize = data.tiles[0].width; } else if (data.tile_width) { // Image API 1.1 Case _this.options.tileSize = data.tile_width; } } function ceilLog2(x) { return Math.ceil(Math.log(x) / Math.LN2); } // Calculates maximum native zoom for the layer _this.maxNativeZoom = Math.max( ceilLog2(_this.x / _this.options.tileSize), ceilLog2(_this.y / _this.options.tileSize), 0 ); _this.options.maxNativeZoom = _this.maxNativeZoom; // Enable zooming further than native if maxZoom option supplied if ( _this._customMaxZoom && _this.options.maxZoom > _this.maxNativeZoom ) { _this.maxZoom = _this.options.maxZoom; } else { _this.maxZoom = _this.maxNativeZoom; } for (var i = 0; i <= _this.maxZoom; i++) { scale = Math.pow(2, _this.maxNativeZoom - i); width_ = Math.ceil(_this.x / scale); height_ = Math.ceil(_this.y / scale); tilesX_ = Math.ceil(width_ / _this.options.tileSize); tilesY_ = Math.ceil(height_ / _this.options.tileSize); tierSizes.push([tilesX_, tilesY_]); imageSizes.push(L.point(width_, height_)); } _this._tierSizes = tierSizes; _this._imageSizes = imageSizes; }) .catch(function (err) { console.error(err); }); }, _setQuality: function () { var _this = this; var profileToCheck = _this.profile; if (_this._explicitQuality) { return; } // If profile is an object if (typeof profileToCheck === "object") { profileToCheck = profileToCheck["@id"]; } // Set the quality based on the IIIF compliance level switch (true) { case /^http:\/\/library.stanford.edu\/iiif\/image-api\/1.1\/compliance.html.*$/.test( profileToCheck ): _this.options.quality = "native"; break; // Assume later profiles and set to default default: _this.options.quality = "default"; break; } }, _infoToBaseUrl: function () { return this._infoUrl.replace("info.json", ""); }, _templateUrl: function () { return ( this._infoToBaseUrl() + "{region}/{size}/{rotation}/{quality}.{format}" ); }, _isValidTile: function (coords) { var _this = this; var zoom = _this._getZoomForUrl(); var sizes = _this._tierSizes[zoom]; var x = coords.x; var y = coords.y; if (zoom < 0 && x >= 0 && y >= 0) { return true; } if (!sizes) return false; if (x < 0 || sizes[0] <= x || y < 0 || sizes[1] <= y) { return false; } else { return true; } }, _tileShouldBeLoaded: function (coords) { return this._isValidTile(coords); }, _getInitialZoom: function (mapSize) { var _this = this; var tolerance = 0.8; var imageSize; // Calculate an offset between the zoom levels and the array accessors var offset = _this._imageSizes.length - 1 - _this.options.maxNativeZoom; for (var i = _this._imageSizes.length - 1; i >= 0; i--) { imageSize = _this._imageSizes[i]; if ( imageSize.x * tolerance < mapSize.x && imageSize.y * tolerance < mapSize.y ) { return i - offset; } } // return a default zoom return 2; } }); L.tileLayer.iiif = function (url, options) { return new L.TileLayer.Iiif(url, options); }; } }32:[{"id":"18990b0c43d7c0a14036da486bbb3095f8e2bb61e5d6470aae599855b777ed93f14407b4f20038182ed4cb4c83259d3d74169d6d2b5f871771c76c15021c89f5","href":"https://static.observableusercontent.com/files/18990b0c43d7c0a14036da486bbb3095f8e2bb61e5d6470aae599855b777ed93f14407b4f20038182ed4cb4c83259d3d74169d6d2b5f871771c76c15021c89f5","name":"geojsons.zip","type":"application/zip","lastModified":1724606841701.134,"size":58532}] 2f:{"id":"826b25c23f39e95a","slug":null,"title":"Campus Atlas v2","thumbnail":"f7ff4e1697e2a35c29ee4b52d2c6285ac3bc90100fd0011db11da5ed96aa81e5","access_level":"public","create_time":"$D2024-08-25T17:25:25.987Z","update_time":"$D2024-09-02T08:35:30.939Z","view_time":null,"first_public_time":"$D2024-08-26T12:51:24.756Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ab036510f7d8e0c1","login":"tudelft","name":"TU Delft Library","avatar_url":"https://avatars-next.observableusercontent.com/1518fc717636b8b67a285d240e13db0d86f758541cb7cbe64b759dfb901b40c6","tier":"pro_2024"},"version":413,"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":"individual","id":"f444e659497ac4e5","login":"sammeltassen","name":"Jules Schoonman","avatar_url":"https://avatars-next.observableusercontent.com/d8e1e715f8e8560d0970b3d60336fe11ce634dd18ec4107ab6e99022494e616c","tier":null,"role":"editor"},{"type":"team","id":"ab036510f7d8e0c1","login":"tudelft","name":"TU Delft Library","avatar_url":"https://avatars-next.observableusercontent.com/1518fc717636b8b67a285d240e13db0d86f758541cb7cbe64b759dfb901b40c6","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Campus Atlas v2","cells":[{"id":0,"value":"# Campus Atlas v2\n\nInspired by: https://tu-delft-heritage.github.io/rijksdriehoeksmeting/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"## Source data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"geojsons = {\n const zip = await FileAttachment(\"geojsons.zip\").zip();\n return await Promise.all(\n zip.filenames.map((filename) => zip.file(filename).json())\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"points = geojsons\n .map((i) => (i.type === \"Feature\" ? i : i.features))\n .flat()\n .filter((feature) => feature.geometry.type === \"Point\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"## Spatial index","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"index = {\n const coords = points.map((feature) => feature.geometry.coordinates);\n const index = new KDBush(coords.length);\n for (const [lon, lat] of coords) index.add(lon, lat);\n index.finish();\n return index;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"nearestPoint = {\n const nearestId = geokdbush.around(index, center.lng, center.lat, 1);\n return points[nearestId[0]];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"selectedImage = {\n const urlArray = nearestPoint.properties.image.split(\"/\");\n const infoJson = urlArray.slice(0, 7).join(\"/\").concat(\"/info.json\");\n const region = urlArray\n .slice(7, 8)[0]\n .split(\",\")\n .map((n) => +n);\n const source = nearestPoint.properties.source;\n return { infoJson, region, source };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"## Leaflet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"mutable center = undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"pointLayer = L.geoJson().addTo(map)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"{\n pointLayer.clearLayers();\n pointLayer.addData(nearestPoint);\n return pointLayer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"geoJsonLayer = L.geoJson(points, {\n pointToLayer: (geoJsonPoint, latlng) => {\n return L.circleMarker(latlng, {\n radius: 5\n });\n }\n}).addTo(map)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"map.fitBounds(geoJsonLayer.getBounds())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"padding = [25, 25]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"map = {\n const map = L.map(\"map\");\n\n L.tileLayer(\"https://tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution:\n '© OpenStreetMap contributors',\n maxZoom: 22\n }).addTo(map);\n\n map.addLayer(warpedMapLayer);\n\n await warpedMapLayer.addGeoreferenceAnnotationByUrl(annotationUrl);\n\n map.on(\"moveend\", () => (mutable center = map.getCenter()));\n\n invalidation.then(() => map.remove());\n\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"image = {\n const image = L.map(\"image\", {\n center: [0, 0],\n crs: L.CRS.Simple,\n zoom: 0\n });\n\n invalidation.then(() => map.remove());\n\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"iiifLayer = {\n image.eachLayer((layer) => image.removeLayer(layer));\n const iiifLayer = await L.tileLayer\n .iiif(selectedImage.infoJson, {\n attribution: selectedImage.source\n })\n .addTo(image);\n const region = selectedImage.region;\n const minPoint = L.point([region[0], region[1]]);\n const maxPoint = L.point([region[2] + region[0], region[3] + region[1]]);\n var min = image.unproject(minPoint, 3);\n var max = image.unproject(maxPoint, 3);\n const bounds = L.latLngBounds(min, max);\n image.fitBounds(bounds);\n return iiifLayer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"## Allmaps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":177,"value":"warpedMapLayer = new AllmapsLeaflet.WarpedMapLayer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"annotationUrl = \"https://annotations.allmaps.org/maps/e7a3b5b91fcb64a3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(\n (L._style = html``)\n );\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"AllmapsLeaflet = require(\"@allmaps/leaflet@1.0.0-beta.39\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"KDBush = require(\"kdbush@4.0.2/kdbush.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"geokdbush = import(\"https://unpkg.com/geokdbush@2.0.1/index.js?module\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"