2c:["$","title",null,{"children":"Allmaps & Annotorious | Allmaps | Observable"}] 31:T521,viewof annotoriousAnnotationsById = { let container = DOM.element('div', { style: `width:${width}px;height:${height}px` }) yield container // view value holds annotations by ID container.value = {} const viewer = OpenSeadragon({ element: container, prefixUrl: 'http://openseadragon.github.io/openseadragon/images/', preserveViewport: true, visibilityRatio: 1, minZoomLevel: 1, defaultZoomLevel: 1, sequenceMode: true, tileSources: [ imageUrl ] }) viewer.addHandler('open', () => { const box = new OpenSeadragon.Rect(0.2, 0.25, 0.6, 0.34) viewer.viewport.fitBounds(box, true) }) const config = {} const anno = Annotorious(viewer, config) anno.setDrawingTool('polygon') function updateAnnotation (id, annotation) { container.value[id] = annotation container.dispatchEvent(new CustomEvent('input')) } initialAnnotoriousAnnotations.forEach((annotation) => { anno.addAnnotation(annotation) updateAnnotation(annotation.id, annotation) }) anno.on('createAnnotation', (annotation) => updateAnnotation(annotation.id, annotation)) anno.on('updateAnnotation', (annotation) => updateAnnotation(annotation.id, annotation)) anno.on('deleteAnnotation', (annotation) => updateAnnotation(annotation.id)) }32:Ta43,allmapsAnnotation = { // Every edit done in Allmaps Editor is saved, and currently, no authentication, // version control, or even undo/redo has been implemented. // It's easy to destroy somebody else's georeferencing work... // To make sure this notebook keeps working, the georeferencing annotationis hard-coded // below, instead of loading it from the Allmaps API. //const annotation = await fetch(allmapsAnnotationUrl).then((response) => response.json()) const annotation = { "type": "Annotation", "@context": [ "http://geojson.org/geojson-ld/geojson-context.jsonld", "http://iiif.io/api/presentation/3/context.json" ], "motivation": "georeference", "target": { "type": "Image", "source": "https://iiif.digitalcommonwealth.org/iiif/2/commonwealth:2r36vc46x/full/full/0/default.jpg", "service": [ { "@id": "https://iiif.digitalcommonwealth.org/iiif/2/commonwealth:2r36vc46x", "type": "ImageService2", "profile": "http://iiif.io/api/image/2/level2.json" } ], "selector": { "type": "SvgSelector", "value": "" } }, "body": { "type": "FeatureCollection", "features": [ { "type": "Feature", "id": "Bem1EQwcMAHstZJa", "properties": { "pixelCoords": [ 1957, 1301 ] }, "geometry": { "type": "Point", "coordinates": [ -72.6680761, 42.2651928 ] } }, { "type": "Feature", "id": "PJRc9KGfGJTP1V8F", "properties": { "pixelCoords": [ 1255, 2509 ] }, "geometry": { "type": "Point", "coordinates": [ -72.6670793, 42.2655566 ] } }, { "type": "Feature", "id": "wPmHFD5xUBBRQDCn", "properties": { "pixelCoords": [ 3613, 3422 ] }, "geometry": { "type": "Point", "coordinates": [ -72.6682381, 42.2668058 ] } } ] } } return annotation }33:T7bb,initialAnnotoriousAnnotations = [ { "type": "Annotation", "body": [ { "type": "TextualBody", "value": "OFFICE & WARE HO. BLDG.", "purpose": "commenting" } ], "target": { "source": "https://iiif.digitalcommonwealth.org/iiif/2/commonwealth:2r36vc46x", "selector": { "type": "SvgSelector", "value": "" } }, "@context": "http://www.w3.org/ns/anno.jsonld", "id": "#2823f078-920c-4141-9bd3-9eb343d55877" }, { "type": "Annotation", "body": [ { "type": "TextualBody", "value": "OFFICE & WARE HO. BLDG.", "purpose": "commenting" } ], "target": { "source": "https://iiif.digitalcommonwealth.org/iiif/2/commonwealth:2r36vc46x", "selector": { "type": "SvgSelector", "value": "" } }, "@context": "http://www.w3.org/ns/anno.jsonld", "id": "#35d0742d-7ace-4c2b-a947-473c8e008fc8" }, { "type": "Annotation", "body": [ { "type": "TextualBody", "value": "DYE & BLEACH HO.", "purpose": "commenting" } ], "target": { "source": "https://iiif.digitalcommonwealth.org/iiif/2/commonwealth:2r36vc46x", "selector": { "type": "SvgSelector", "value": "" } }, "@context": "http://www.w3.org/ns/anno.jsonld", "id": "#5538dd39-135a-431e-a4e4-d6e5195ac571" } ]34:[] 2f:{"id":"c0691b844ef2acec","slug":"allmaps-and-annotorious","title":"Allmaps & Annotorious","thumbnail":"4e1e86f8e95b0ddf8919fee2b6fff05e6120603d8f15d2eaa8512a728797e949","access_level":"public","create_time":"$D2021-06-23T15:53:38.957Z","update_time":"$D2024-10-16T11:21:36.055Z","view_time":null,"first_public_time":"$D2021-06-24T08:19:27.922Z","fork":false,"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":573,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf3b6e1e3dc67c1f","login":"bertspaan","name":"Bert Spaan","avatar_url":"https://avatars-next.observableusercontent.com/30e87702a8b688510b4d1c30f411d16532c7d46a100044235468810a711ae98d","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":"bf3b6e1e3dc67c1f","login":"bertspaan","name":"Bert Spaan","avatar_url":"https://avatars-next.observableusercontent.com/30e87702a8b688510b4d1c30f411d16532c7d46a100044235468810a711ae98d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Allmaps & Annotorious","cells":[{"id":411,"value":"# Allmaps & Annotorious\n\nThis notebook shows how [Annotorious](https://recogito.github.io/annotorious/) can be combined with [Allmaps](https://allmaps.org/) to annotate a georeferenced IIIF image, and translate annotations to GeoJSON on the fly.\n\nYou can add new annotations on the image below, or edit the existing annotations. __Press and hold Shift__ to start drawing a new polygonal annotation. __Double-click to close__ the polygon.\n\n> Note: it is not yet possible to add or remove points to an existing polygon, this functionality will be added in an upcoming version of Annotorious. For the time being, you need to delete the polygon and\n> redraw.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":35,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"{\n const container = html`

`\n yield container\n const map = L.map(container)\n\n const tileSource = {\n url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',\n\t attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'\n }\n\n L.tileLayer(tileSource.url, {\n attribution: tileSource.attribution\n }).addTo(map)\n \n function onEachFeature (feature, layer) {\n const properties = feature.properties \n const html = properties.value\n layer.bindPopup(html)\n }\n \n const geojsonLayer = L.geoJSON(geojson, {\n style: leafletGeoJSONStyle,\n onEachFeature\n }).addTo(map)\n\n map.fitBounds(geojsonLayer.getBounds())\n // map.fitBounds(L.geoJson(geoMask).getBounds())\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"The map above shows the polygonal annotations from Annotorious, transformed to GeoJSON with Allmaps. To see the data in more detail, you can open the resulting GeoJSON on [geojson.io](http://geojson.io/#data=data:application/json,${encodeURIComponent(JSON.stringify(geojson))}).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":0,"value":"## IIIF\nThe map used in this example is a fire insurance map of the [Glendale Elastic Fabrics Company in Easthampton, Massachusetts](https://www.digitalcommonwealth.org/search/commonwealth:2r36vc45n) from the [American Textile History Museum](https://athm.org/) (thanks to [@en_dash](https://twitter.com/en_dash) for pointing me to this collection).\n\nThis map — and many, many more — are avaible with [IIIF](https://iiif.io/) through [Digital Commonwealth](https://www.digitalcommonwealth.org/search?f%5Bgenre_basic_ssim%5D%5B%5D=Maps). This means you can view a zoomable high-res version of the map with any IIIF-compatible viewer such as [Mirador](https://projectmirador.org/embed/?manifest=${manifestUri}). Digital Commonwealth is just one of the many institutions around the world that allow their map collections to be viewer with IIIF.`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":361,"value":"## Allmaps\n\n[Allmaps](https://allmaps.org) is a set of open-source tools for web-based georeferencing, warping and exploring IIIF maps. Any map that is available with IIIF can be georeferenced and viewed with Allmaps, no additional infrastructure is needed.\n\n- Georeference this map with [Allmaps Editor](https://editor.allmaps.org/#/mask?url=${imageUri}).\n\nThe result of this process is a small JSON Web Annotation that stores all the information needed to georeference and warp a IIIF map:\n\n- Open this annotation from the [Allmaps API](${allmapsAnnotationUrl}).\n\nCombined with the source image served with the IIIF Image API, this metadata is enough to warp and view the map with WebGL.\n\n- View the warped map with [Allmaps Viewer](https://viewer.allmaps.org/#type=annotation&data=data:text/x-url,${allmapsAnnotationUrl}).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":227,"value":"## Annotorious\n\n[Annotorious](https://recogito.github.io/annotorious/) is an open-source JavaScript image annotation library made by [Rainer Simon](https://twitter.com/aboutgeo).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":352,"value":"## How does all of this work?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":446,"value":"Using the IIIF Manifest of the image, we can georeference the map with Allmaps Editor:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":329,"value":"manifestUri = 'https://ark.digitalcommonwealth.org/ark:/50959/2r36vc45n/manifest'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":453,"value":"This produces a Web Annotation with georeference metadata:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":96,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":462,"value":"This annotation can be parsed with the `@allmaps/annotation` module:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":108,"value":"parsedMap = annotationParser.parseAnnotation(allmapsAnnotation)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"Ground control points (GCPs) define the transformation between pixel coordinates and geospatial coordinates. The module `@allmaps/transform` can perform this transformation:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":111,"value":"transformer = new allmapsTransform.GcpTransformer(parsedMap.gcps, \"polynomial\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"Annotorious produces a Web Annotation for each polygon:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":263,"value":"annotoriousAnnotations = Object.values(annotoriousAnnotationsById)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":474,"value":"Finally, a GeoJSON Feature can be generated from each annotation:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":144,"value":"geojson = ({\n type: 'FeatureCollection',\n features: Object.values(annotoriousAnnotations).map(annotoriousAnnotationToFeature)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":223,"value":"## Allmaps functions and data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":338,"value":"manifest = fetch(manifestUri).then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":341,"value":"parsedManifest = iiifParser.Manifest.parse(manifest)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"imageUri = parsedManifest.canvases[0].image.uri","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"imageId = allmapsId.generateId(imageUri)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"allmapsAnnotationUrl = `https://annotations.allmaps.org/images/${imageId}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"imageUrl = `${imageUri}/info.json`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"## Functions and constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":180,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"annotoriousAnnotationToFeature = (annotation) => ({\n type: \"Feature\",\n properties: annotation.body[0],\n geometry: transformer.transformForwardAsGeojson(getPixelMask(annotation))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"// This function will be part of the @allmaps/annotation module\ngetPixelMask = (annotation) => {\n const selector = annotation.target.selector;\n if (selector) {\n const svg = selector.value;\n const {\n groups: { points }\n } = /points=\"(?.+)\"/.exec(svg);\n const coordinates = points\n .split(\" \")\n .map((point) => point.split(\",\").map((c) => parseInt(c)));\n\n return [[...coordinates, coordinates[0]]];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":236,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"Annotorious = require('@recogito/annotorious-openseadragon')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"OpenSeadragon = require('openseadragon')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"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(L._style = html``)\n }\n return L\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"// chroma = import(\"https://unpkg.com/chroma-js@3.1.2/index.js?module\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"allmapsId = import('https://cdn.skypack.dev/@allmaps/id@1.0.0-beta.5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"allmapsTransform = import(\"@allmaps/transform@1.0.0-beta.37\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"iiifParser = import('@allmaps/iiif-parser@1.0.0-beta.4')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"annotationParser = import(\"@allmaps/annotation@1.0.0-beta.26\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"allmapsStdlib = import(\n \"https://unpkg.com/@allmaps/stdlib@1.0.0-beta.27/dist/index.js?module\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body" 2b:E{"digest":"NEXT_REDIRECT;replace;/@allmaps/allmaps-and-annotorious;307;"}