31:T53a,# Using Allmaps to draw GeoJSON on a IIIF image Georeferencing is often used to transform a digitized map to a geospatial image that can be viewed in GIS software or in web map libraries such as [Leaflet](https://leafletjs.com/) or [OpenLayers](https://openlayers.org/). The image is _warped_ with an transformation algorithm that rotates and stretches the original image in such a way that it fits over a map of the world. The transformation algorithm converts pixel coordinates to geospatial coordinates. A few weeks ago, [I made a notebook](https://observablehq.com/@bertspaan/allmaps-and-annotorious) that showed how [Allmaps](https://allmaps.org) can be used to convert vector data drawn on a map image can be converted to GeoJSON. In this notebook I’ll show how this process can also be reversed 🔄: the georeference metadata produced by [Allmaps Editor](https://editor.allmaps.org/) can be used to convert geospatial coordinates to pixel coordinates to draw GeoJSON on the original — _unwarped_ — map. __Below we see a [1921 aerial photo of Manhattan](${collectionUrl}), with Broadway drawn in red__. The image comes from the [map collections of the Library of Congress](https://www.loc.gov/maps). All of LOC’s digitized maps are available through [IIIF](https://iiif.io/).32:Tb2a,annotation = { // return fetch(annotationUrl).then((reponse) => reponse.json()) // In the current version of Allmaps Editor, everybody can make edits to every map! // The Allmaps API always returns the latest version. // I'll add version control or version pinning later this year. // In this notebook, we are therefore using a static annotation, instead of // loading the annotation from the Allmaps API: return { "type": "Annotation", "@context": [ "http://geojson.org/geojson-ld/geojson-context.jsonld", "http://iiif.io/api/presentation/3/context.json" ], "motivation": "georeferencing", "target": { "type": "Image", "source": "https://tile.loc.gov/image-services/iiif/service:gmd:gmd380:g3804:g3804n:ct003447/full/full/0/default.jpg", "service": [ { "@id": "https://tile.loc.gov/image-services/iiif/service:gmd:gmd380:g3804:g3804n:ct003447", "type": "ImageService2" } ], "selector": { "type": "SvgSelector", "value": "" } }, "body": { "type": "FeatureCollection", "purpose": "gcp-georeferencing", "transformation": { "type": "polynomial", "order": 0 }, "features": [ { "type": "Feature", "id": "AnZd9W2yMMPA85tN", "properties": { "pixelCoords": [ 5509, 5679 ] }, "geometry": { "type": "Point", "coordinates": [ -73.9836089, 40.726189 ] } }, { "type": "Feature", "id": "Zn98YEVuNB2B13gr", "properties": { "pixelCoords": [ 1528, 4509 ] }, "geometry": { "type": "Point", "coordinates": [ -74.0138747, 40.7042364 ] } }, { "type": "Feature", "id": "gp5wH252qWhFnEQ2", "properties": { "pixelCoords": [ 10337, 3161 ] }, "geometry": { "type": "Point", "coordinates": [ -73.9819269, 40.7680818 ] } }, { "type": "Feature", "id": "v3FpcgJfyVNBUHFA", "properties": { "pixelCoords": [ 25742, 2631 ] }, "geometry": { "type": "Point", "coordinates": [ -73.9096993, 40.8745972 ] } } ] } } }33:[{"id":"59f44bae45856c8aa3556eb2952494dad8aa09909f582a748e6b9391a424762ac7852fb2f81a3a9c4aa80ff6bc836d220402485ccfd6720a06939a923597fbc8","href":"https://static.observableusercontent.com/files/59f44bae45856c8aa3556eb2952494dad8aa09909f582a748e6b9391a424762ac7852fb2f81a3a9c4aa80ff6bc836d220402485ccfd6720a06939a923597fbc8","name":"geojson-screenshot.jpg","type":"image/jpeg","lastModified":1627646282578.414,"size":403823},{"id":"2fd8dcc372d73fee16654e8b41fb552ed2f811c50a3f42db3b19c13392054c472dfb373a59e5038bdbfc7ccf03dec23b2049f5fda5d67e87564dd428c880c8ee","href":"https://static.observableusercontent.com/files/2fd8dcc372d73fee16654e8b41fb552ed2f811c50a3f42db3b19c13392054c472dfb373a59e5038bdbfc7ccf03dec23b2049f5fda5d67e87564dd428c880c8ee","name":"broadway@2.json","type":"application/json","lastModified":1627733734046.971,"size":18307},{"id":"8ba57b086a9c1765febcf70978be1d01c222a9d5db5f8c2597c48d03a1e7f2d6c0bbbdc718c6179e59b09b67a242738c5fb353ec20e9df1525a26a5018929271","href":"https://static.observableusercontent.com/files/8ba57b086a9c1765febcf70978be1d01c222a9d5db5f8c2597c48d03a1e7f2d6c0bbbdc718c6179e59b09b67a242738c5fb353ec20e9df1525a26a5018929271","name":"viewer-screenshot.jpg","type":"image/jpeg","lastModified":1627735553883.375,"size":299149}] 2f:{"title":"Using Allmaps to draw GeoJSON on a IIIF image","cells":[{"id":69,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"viewof olMap = displayIIIF(imageUri)","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"## From GeoJSON to pixel coordinates\n\nTo convert geospatial data to something we can draw on the original IIIF image, we first need some data. This notebook uses a GeoJSON `MultiLineString` of Broadway, from Battery Park to the Harlem River. This data was taken from the [fillerwriter/nyc-streets](https://github.com/fillerwriter/nyc-streets) GitHub repository. The original dataset contains _all_ streets in New York City, I removed every street except Broadway. (I also removed the Broadways in Brooklyn, Queens and the Bronx!)\n\nIn this notebook, GeoJSON data is loaded from an attached file:","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"geojson = {\n const feature = await FileAttachment(\"broadway@2.json\").json()\n\n return { \n ...feature,\n properties: {\n ...feature.properties,\n stroke: style.color,\n 'stroke-width': style.width\n } \n }\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"We can open this GeoJSON object with [geojson.io](${geojsonUrl}) to view the data on a map:","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"\n ${await FileAttachment('geojson-screenshot.jpg').image()}\n","pinned":false,"hidden":false,"mode":"html"},{"id":362,"value":"The IIIF Manifest of the aerial photo of Manhattan is available with this URL:","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"manifestUri = 'https://www.loc.gov/item/90680339/manifest.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"You can open this URL with every IIIF-compatible viewer, such as [Universal Viewer](https://universalviewer.io/uv.html?manifest=${manifestUri}).","pinned":false,"hidden":false,"mode":"md"},{"id":373,"value":"[Allmaps Editor](${editorUrl}) can georeference every map that is available through IIIF, also by using its IIIF URL:","pinned":false,"hidden":false,"mode":"md"},{"id":145,"value":"editorUrl = `https://editor.allmaps.org/#/mask?url=${manifestUri}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"After the map has been georeferenced, Allmaps Editor produces a [Web Annotation](https://www.w3.org/TR/annotation-model/) with georeference metadata:","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"This annotation can be opened with [Allmaps Viewer](${viewerUrl}). Allmaps Viewer can warp IIIF images on-the-fly, with WebGL:","pinned":false,"hidden":false,"mode":"md"},{"id":390,"value":"\n ${await FileAttachment('viewer-screenshot.jpg').image()}\n","pinned":false,"hidden":false,"mode":"html"},{"id":397,"value":"The [`@allmaps/annotation`](https://github.com/allmaps/annotation) JavaScript module can be used to parse the web annotation. The `parse` function returns a list of georeferenced maps contained by the web annotation: ","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"maps = annotationParser.parseAnnotation(annotation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"With the [`@allmaps/transform`](https://github.com/allmaps/transform) JavaScript module, we can create a ground control point transformation that can convert pixel coordinates to geospatial coordinates. And the other way around! See the [gdaltransform notebook](https://observablehq.com/@bertspaan/gdaltransform?collection=@bertspaan/allmaps) for more details about how this works.\n\nThe resulting GeoJSON is not valid GeoJSON — it contains pixel coordinates instead of latitude/longitude coordinates:","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"transformedGeoJSON = {\n const gcps = maps[0].gcps.map(({ image, world }) => ({\n resource: image,\n geo: world\n }));\n const multiLineString = geojson.geometry;\n\n const transformer = new transform.GcpTransformer(gcps);\n\n // The current version of @allmaps/transform does not yet support\n // easy conversion of geospatial GeoJSON to image GeoJSON.\n // This currently needs to be done point by point.\n // I'm working on a new version that will make this much easier!\n const transformedMultiLineString = multiLineString.coordinates.map(\n (lineString) =>\n lineString.map((point) => {\n const transformedPoint = transformer.transformToResource(point);\n\n return [transformedPoint[0], -transformedPoint[1]];\n })\n );\n\n return {\n ...geojson,\n geometry: {\n type: \"MultiLineString\",\n coordinates: transformedMultiLineString\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"[Above](#olMap), we have already seen that we can draw the transformed GeoJSON on the IIIF image with OpenLayers to create an interactive, zoomable image.\n\nWe can also convert `transformedGeoJSON` to SVG to draw over a static image:","pinned":false,"hidden":false,"mode":"md"},{"id":269,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":353,"value":"__If you think this can be useful, let me know on [Twitter](https://twitter.com/bertspaan)! Allmaps is not yet finished, I’m looking for institutions with map collections that are interested in working with me to make digitized maps more easy/fun/inspiring to work with.__","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"## Functions, data & constants","pinned":false,"hidden":false,"mode":"md"},{"id":340,"value":"lineStringToPoints = (lineString) => {\n return lineString.map((point) => [point[0] * scale, -point[1] * scale].join(',')).join(' ')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"imageUrl = `${imageUri}/full/${width},/0/default.jpg`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"scale = width / imageWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"height = scale * imageHeight","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"imageWidth = maps[0].image.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"imageHeight = maps[0].image.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"manifestId = allmapsId.generateId(manifestUri)","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"imageUri = annotation.target.service[0]['@id']","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"collectionUrl = 'https://www.loc.gov/item/90680339/'","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"annotationUrl = `https://annotations.allmaps.org/manifests/${manifestId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewerUrl = `https://viewer.allmaps.org/#type=annotation&data=data:text/x-url,${annotationUrl}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"geojsonUrl = `http://geojson.io/#data=data:application/json,${encodeURIComponent(JSON.stringify(geojson, null, 2))}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"vectorLayer = {\n const center = [15193.5 / 3.2, -4230];\n const zoom = 2.2787583721318274 + 0.9;\n\n const view = olMap.getView();\n view.setZoom(zoom);\n view.setCenter(center);\n\n const vectorLayer = new ol.layer.Vector({\n source: new ol.source.Vector({\n features: new ol.format.GeoJSON().readFeatures(transformedGeoJSON)\n }),\n style: new ol.style.Style({\n stroke: new ol.style.Stroke({\n color: style.color,\n width: style.width\n })\n })\n });\n\n olMap.addLayer(vectorLayer);\n\n return vectorLayer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"style = ({\n color: '#FE5E60',\n width: 7\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"annotationParser = import('https://cdn.skypack.dev/@allmaps/annotation@1.0.0-beta.5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"allmapsId = import('https://cdn.skypack.dev/@allmaps/id@1.0.0-beta.5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"transform = import(\n \"https://cdn.skypack.dev/@allmaps/transform@1.0.0-beta.37?min\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"css","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"import { displayIIIF, ol, css } from '@bertspaan/iiif-and-openlayers'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}