29:null 2a:["$","title",null,{"children":"Japan Lights | Allmaps | Observable"}] 2f:Tea6,photoLocations = [ { canvas: 1, location: "Kanonsaki", wikipedia: { url: "https://en.wikipedia.org/wiki/Kannonzaki_Lighthouse", name: "Kannonzaki Lighthouse", year: 1869, lat: 35.256167, lon: 139.745222 }, visualMatch: "yes" }, { canvas: 2, location: "Nosima", wikipedia: { url: "https://en.wikipedia.org/wiki/Nojimazaki_Lighthouse", name: "Nojimazaki Lighthouse", year: 1869, lat: 34.901778, lon: 139.888278 }, visualMatch: "yes" }, { canvas: 3, location: "Iwosima (Nagasaki)", wikipedia: { url: "https://en.wikipedia.org/wiki/Iojimazaki_Lighthouse", name: "Iojimazaki Lighthouse", year: "1871", lat: 32.714083, lon: 129.76125 }, visualMatch: "yes" }, { canvas: 4, location: "Satanomisaki", wikipedia: { url: "https://en.wikipedia.org/wiki/Satamisaki_Lighthouse", name: "Satamisaki Lighthouse", year: "1871", lat: 30.992111, lon: 130.659444 }, visualMatch: "yes" }, { canvas: 5, location: "Satanomisaki", wikipedia: { url: "https://en.wikipedia.org/wiki/Satamisaki_Lighthouse", name: "Satamisaki Lighthouse", year: "1871", lat: 30.992111, lon: 130.659444 }, visualMatch: "yes" }, { canvas: 6, location: "Rockuren (Simonoseki)", wikipedia: { url: "https://en.wikipedia.org/wiki/Mutsurejima_Lighthouse", name: "Mutsurejima Lighthouse", year: 1871, lat: 33.978056, lon: 130.867917 }, visualMatch: "yes" }, { canvas: 7, location: "Wada no misaki", material: "wood" }, { canvas: 8, location: "Yesaki", wikipedia: { url: "https://en.wikipedia.org/wiki/Esaki_Lighthouse", name: "Esaki Lighthouse", year: "1871", lat: 34.6064, lon: 134.9933 }, visualMatch: "yes" }, { canvas: 9, location: "Rockuren (Simonoseki)", wikipedia: { url: "https://en.wikipedia.org/wiki/Mutsurejima_Lighthouse", name: "Mutsurejima Lighthouse", year: 1871, lat: 33.978056, lon: 130.867917 }, visualMatch: "yes" }, { canvas: 10, location: "?", material: "wood" }, { canvas: 11, location: "Mikomoto (Rock Island)", wikipedia: { url: "https://en.wikipedia.org/wiki/Mikomotoshima_Lighthouse", name: "Mikomotoshima Lighthouse", year: 1871, lat: 34.57536, lon: 138.94144 }, visualMatch: "yes" }, { canvas: 12, location: "Iro o saki (Isdu)", material: "wood", wikipedia: { url: "https://en.wikipedia.org/wiki/Ir%C5%8Dzaki_Lighthouse", name: "Irōzaki Lighthouse", year: "1871", lat: 34.602806, lon: 138.845056 }, visualMatch: "yes, rebuilt" }, { canvas: 13, location: "Kashinosaki", wikipedia: { url: "https://en.wikipedia.org/wiki/Kashinozaki_Lighthouse", name: "Kashinozaki Lighthouse", year: 1870, lat: 33.4714, lon: 135.8619 }, visualMatch: "Increased height" }, { canvas: 14, location: "Temposan (Osaka)" }, { canvas: 15, location: "Isaki (Simonoseki)", wikipedia: { url: "https://en.wikipedia.org/wiki/Hesaki_Lighthouse", name: "Hesaki Lighthouse", year: 1871, lat: 33.959389, lon: 131.022972 }, visualMatch: "Under construction on photo" }, { canvas: 16, location: "Tsuruci saki", wikipedia: { url: "https://en.wikipedia.org/wiki/Tsurugisaki_Lighthouse", name: "Tsurugisaki Lighthouse", year: 1871, lat: 35.1403, lon: 139.6772 }, visualMatch: "Structure was rebuilt" } ]30:T14f6,map = { const map = new maplibregl.Map({ container, // center: [5, 52.2], // zoom: 6.7, // style: "https://tiles.openfreemap.org/styles/bright", style: baseMapStyle, // Allmaps does not support tilted maps (yet) maxPitch: 0 }); let backgroundMapId; let initialBounds; AllmapsBasemap.addTerrain(map, maplibregl); map.on("load", async () => { map.addLayer(warpedMapLayer); const ids = await warpedMapLayer.addGeoreferenceAnnotationByUrl( georefAnnotationUrl ); backgroundMapId = ids[0]; warpedMapLayer.setMapOptions(backgroundMapId, { transformationType: "straight" }); let bounds = new maplibregl.LngLatBounds(warpedMapLayer.getBounds()); initialBounds = bounds.adjustAntiMeridian(); map.fitBounds(initialBounds, { padding }); animateWarpedMapOpacity(backgroundMapId); // https://maplibre.org/maplibre-gl-js/docs/examples/add-multiple-geometries-from-one-geojson-source/ map.addSource("lighthouses", { type: "geojson", data: lighthousesGeoJson }); // https://maplibre.org/maplibre-gl-js/docs/examples/draw-geojson-points/ map.addLayer({ id: "lighthouses", type: "symbol", // type: "circle", source: "lighthouses", layout: { // "icon-image": "custom-marker", // get the year from the source's "year" property "text-field": "⛯", "text-size": 30, "text-font": ["Noto Sans Regular"], "text-offset": [0, 0], "text-anchor": "center" // "text-color": "yellow" }, paint: { "text-color": "#3b5fc0" // "circle-radius": 8, // "circle-color": "#B42222" } }); map.on("click", async (e) => { // Get feature at point const [clickedFeature] = map.queryRenderedFeatures(e.point, { layers: ["lighthouses"] }); // Check if focussed const focussed = warpedMapLayer.getMapOptions(backgroundMapId).visible === false; if (focussed && !clickedFeature) { // Reset view map.fitBounds(initialBounds, { padding }); const warpedMapsById = warpedMapLayer.getWarpedMapList().warpedMapsById; warpedMapsById.forEach((warpedMap, id) => { const { visible } = warpedMap.options; if (visible || id === backgroundMapId) { animateWarpedMapOpacity(id); } }); } else if (clickedFeature) { // Add photo to map if (!focussed) { // Hide background map animateWarpedMapOpacity(backgroundMapId); } const featureProps = clickedFeature.properties; const featureCoord = clickedFeature.geometry.coordinates; const { imageId } = featureProps; const exists = warpedMapLayer.getWarpedMap(imageId); if (!exists) { // Add 'fake' Georeference Annotation to warpedMapLayer const distance = 1; const bearing = -90; const destination = rhumbDestination.rhumbDestination( featureCoord, distance, bearing ); const westCoord = destination.geometry.coordinates; const georefMap = createMap(featureProps, featureCoord, westCoord); await warpedMapLayer.addGeoreferencedMap(georefMap); } const bbox = warpedMapLayer.getWarpedMap(imageId).geoMaskBbox; // Zoom to photo bounds let bounds = new maplibregl.LngLatBounds(bbox); let adjustedBounds = bounds.adjustAntiMeridian(); map.fitBounds(adjustedBounds, { padding }); // This will hide the photo if the same feature is clicked twice! animateWarpedMapOpacity(imageId); } }); // https://maplibre.org/maplibre-gl-js/docs/examples/display-a-popup-on-click/ // map.on("click", "lighthouses", (e) => { // const coordinates = e.features[0].geometry.coordinates.slice(); // const props = e.features[0].properties; // const wiki = JSON.parse(props.wikipedia); // const link = // "https://heritage.tudelft.nl/nl/objects/trk-9103-e-03?id=" + // (props.canvas - 1); // const html = ` //

${props.location} — ${wiki.name} (${wiki.year})

// `; // // Ensure that if the map is zoomed out such that multiple // // copies of the feature are visible, the popup appears // // over the copy being pointed to. // while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { // coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; // } // new maplibregl.Popup().setLngLat(coordinates).setHTML(html).addTo(map); // }); map.on("mouseenter", "lighthouses", () => { map.getCanvas().style.cursor = "pointer"; }); map.on("mouseleave", "lighthouses", () => { map.getCanvas().style.cursor = ""; }); }); map.addControl(new maplibregl.NavigationControl()); return map; }31:[{"id":"5f6d79c1f7dfb14a1123817d422da23a721fa2b680cdf65a64af4771a70a0e1b9faec0cd2bce07391cc9d234101a098aa95fe6f6b4bb08d30f6b04f551507036","href":"https://static.observableusercontent.com/files/5f6d79c1f7dfb14a1123817d422da23a721fa2b680cdf65a64af4771a70a0e1b9faec0cd2bce07391cc9d234101a098aa95fe6f6b4bb08d30f6b04f551507036","name":"targets.txt","type":"text/plain","lastModified":1768670856086.027,"size":1705}] 2d:{"id":"b9323741423d2152","slug":null,"title":"Japan Lights","thumbnail":"a847e7a297151d62d9255a9aefcae6d8e23bfe59c11f920987c7595653bcb86b","access_level":"public","create_time":"$D2023-05-17T18:02:02.229Z","update_time":"$D2026-06-16T08:45:29.629Z","view_time":null,"first_public_time":"$D2023-05-17T18:02:02.229Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"8917b8f0b5bcd50a","login":"allmaps","name":"Allmaps","avatar_url":"https://avatars-next.observableusercontent.com/558e397531ba56d7134b2879485d93fba9d27c9b932e520cb72bea9bdd4133c7","tier":"starter_2024"},"version":732,"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,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Japan Lights","cells":[{"id":0,"value":"# Japan Lights\n\nDemonstrating a way to combine of IIIF [navPlace](https://iiif.io/api/extension/navplace/) & [Georeference](https://iiif.io/api/extension/georef/) extensions in a single interface.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":268,"value":"viewof opacity = Inputs.range([0, 1], {\n label: \"Opacity\",\n step: 0.05,\n value: initialOpacity\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":352,"value":"viewof threshold = Inputs.range([0, 0.3], {\n label: \"Remove background color\",\n step: 0.01,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":711,"value":"_Click on a point to zoom in and load the photo on the map; once zoomed in you can click on the photo or map to zoom back out again._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":718,"value":"// https://observablehq.com/@esperanc/full-screen-animation\n{\n function fullScreen(element) {\n if (element.requestFullScreen) {\n element.requestFullScreen();\n } else if (element.webkitRequestFullScreen) {\n element.webkitRequestFullScreen();\n } else if (element.mozRequestFullScreen) {\n element.mozRequestFullScreen();\n }\n }\n\n let button = html``;\n button.onclick = function () {\n fullScreen(container);\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"container = yield html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"Extensions:\n\n- [navPlace Extension](https://iiif.io/api/extension/navplace/)\n- [Georeference Extension](https://iiif.io/api/extension/georef/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":10,"value":"Steps:\n\n1. ~~Complete manifest with metadata~~\n2. ~~Add manifest to heritage website~~\n3. ~~Georeference map with Allmaps~~\n4. ~~Geolocate photos~~\n5. Embed navPlace and Georeference Annotation in manifest\n6. Finish this Notebook by parsing preview above from source data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":16,"value":"Links:\n\n- [Resource on Academic Heritage website](https://heritage.tudelft.nl/objects/trk-9103-e-03)\n- [Richard Henry Brunton: father of Japan’s lighthouse service.](https://grahamthomasauthor.wordpress.com/2020/05/10/richard-henry-brunton-father-of-japans-lighthouse-service/)\n- [Richard Henry Brunton](https://en.wikipedia.org/wiki/Richard_Henry_Brunton)\n- [The Stevenson Maps and Plans of Scotland, 1660 - 1940](https://maps.nls.uk/projects/stevenson/further-resources.html)\n- [The Lighthouse Directory](http://www.ibiblio.org/lighthouse/)\n- [Japanese Lighthouses](http://yamatae.sakura.ne.jp/light.html)\n- [List of lighthouses in Japan](https://en.wikipedia.org/wiki/List_of_lighthouses_in_Japan)\n\nTechnical:\n\n- [Get Geojson from Wikidata](https://stackoverflow.com/questions/66850047/get-geojson-data-from-wikidata)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":726,"value":"## Locations missing\n\nNo (exact) locations could be determined for the following lighthouses:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":105,"value":"photosWithoutLocation = photoLocationsWithThumbnail.filter(\n (item) => !item.wikipedia\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":307,"value":"$${photosWithoutLocation.map((i) => html`\n

\n \n \n \n

${i.location}

\n \n`)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":277,"value":"## Source data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"iiifManifestUrl = \"https://heritage.tudelft.nl/iiif/manifests/trk-9103-e-03/manifest.json\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"iiifManifest = fetch(iiifManifestUrl).then((resp) => resp.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"[Open in Allmaps Editor](https://editor.allmaps.org/images?url=${iiifManifestUrl})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":89,"value":"WikiData Query:\n\n```sparql\n#Map of Japanese lighthouses\n#defaultView:Map\nSELECT ?item ?itemLabel ?geo WHERE {\n SERVICE wikibase:label { bd:serviceParam wikibase:language \"[AUTO_LANGUAGE]\". }\n # instance of lighthouse\n ?item wdt:P31 wd:Q39715\n # part of 50 lighthouses in Japan\n ?item wdt:P361 wd:Q11086473.\n # architect Richard Henry Brunton\n ?item wdt:P84 wd:Q3430861.\n # architect Léonce Verny\n ?item wdt:P84 wd:Q3091714.\n # country Japan\n ?item wdt:P17 wd:Q17\n # coordinate location\n ?item wdt:P625 ?geo.\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":25,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"_Photos cropped with [Liiive](https://liiive.now/); static import of annotations targets:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":432,"value":"regions = {\n const text = await FileAttachment(\"targets.txt\").text();\n return Object.fromEntries(\n text\n .split(\"\\n\")\n .filter((line) => line)\n .map((line) => line.split(\"#xywh=\"))\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":239,"value":"photoLocationsWithThumbnail = photoLocations.map((i) => {\n const canvas = iiifManifest.items[i.canvas - 1];\n const { width, height, id } = canvas;\n const region = regions[id];\n const imageId = canvas.items[0].items[0].body.service[0].id;\n // const thumbUrl = canvas.thumbnail[0].id;\n const thumbUrl = `${imageId}/${region}/!200,200/0/default.jpg`;\n return { ...i, thumbUrl, imageId, region, width, height };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"photosWithLocation = photoLocationsWithThumbnail.filter(\n (item) => item.wikipedia && item.wikipedia.lat\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"lighthousesGeoJson = geojson.parse(photosWithLocation, {\n Point: [\"wikipedia.lat\", \"wikipedia.lon\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"_Functions to add the photo directly as a map layer and animate opacity:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":454,"value":"createMap = (photo, centerCoord, westCoord) => {\n let { width, height, imageId, region } = photo;\n const [x, y, regionWidth, regionHeight] = region\n .split(\",\")\n .map((i) => parseInt(i));\n const resourceMask = [\n [x, y],\n [x + regionWidth, y],\n [x + regionWidth, y + regionHeight],\n [x, y + regionHeight]\n ];\n const [centerX, centerY] = [Math.round(width / 2), Math.round(height / 2)];\n const gcps = [\n {\n resource: [centerX, centerY],\n geo: Object.values(centerCoord)\n },\n {\n resource: [x, centerY],\n geo: Object.values(westCoord)\n }\n ];\n return {\n [\"@context\"]: \"https://schemas.allmaps.org/map/2/context.json\",\n id: imageId,\n type: \"GeoreferencedMap\",\n resource: {\n id: imageId,\n width,\n height,\n type: \"ImageService3\"\n },\n gcps,\n resourceMask,\n transformation: {\n type: \"straight\"\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":603,"value":"function animateWarpedMapOpacity(warpedMapId, duration = 1000) {\n // https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame#examples\n const fadeIn = warpedMapLayer.getMapOptions(warpedMapId).visible === false;\n if (fadeIn) {\n warpedMapLayer.setMapOptions(warpedMapId, { visible: true, opacity: 0 });\n }\n let zero;\n requestAnimationFrame(firstFrame);\n\n function firstFrame(timestamp) {\n zero = timestamp;\n animate(timestamp);\n }\n\n function animate(timestamp) {\n const value = (timestamp - zero) / duration;\n let opacity;\n if (value < 1) {\n opacity = fadeIn ? value : 1 - value;\n warpedMapLayer.setMapOptions(warpedMapId, { opacity });\n requestAnimationFrame((t) => animate(t));\n } else {\n opacity = fadeIn ? 1 : 0;\n warpedMapLayer.setMapOptions(warpedMapId, { opacity });\n if (!fadeIn) {\n warpedMapLayer.setMapOptions(warpedMapId, { visible: false });\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"## Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":100,"value":"georefAnnotationUrl = \"https://annotations.allmaps.org/images/e421b4323bb26d69\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":372,"value":"initialOpacity = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"warpedMapLayer = new AllmapsMapLibre.WarpedMapLayer({\n opacity: initialOpacity,\n visible: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"{\n const hexColor = \"#e8e1cf\";\n if (warpedMapLayer && warpedMapLayer.renderer) {\n warpedMapLayer.setOpacity(opacity);\n warpedMapLayer.setLayerOptions({\n removeColor: true,\n removeColorColor: hexColor,\n removeColorThreshold: threshold\n });\n }\n\n return {\n opacity,\n hexColor,\n threshold\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"padding = ({ top: 25, bottom: 25, left: 25, right: 25 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":339,"value":"baseMapStyle = ({\n ...AllmapsBasemap.basemapStyle(\"en\"),\n // glyphs:\n // \"https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":257,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":112,"value":"geojson = import(\"https://cdn.skypack.dev/geojson@latest\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"maplibregl = require(\"maplibre-gl@5.15.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"AllmapsMapLibre = import(\"https://esm.sh/@allmaps/maplibre@1.0.0-beta.42\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"AllmapsBasemap = import(\"https://esm.sh/@allmaps/basemap@1.0.0-beta.8\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":538,"value":"rhumbDestination = import(\"https://esm.sh/@turf/rhumb-destination@7.3.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"