2c:null 2d:["$","title",null,{"children":"Georeferencing a map by transcribing toponyms | Allmaps | Observable"}] 32:[{"id":"34543ff42cc9725984d6f2762e4162371e8c187c49756f802ed8deaea1978f313f87568b3504ff02805a1596c6a1676fc16fe786a113c27035810c521ea100ea","href":"https://static.observableusercontent.com/files/34543ff42cc9725984d6f2762e4162371e8c187c49756f802ed8deaea1978f313f87568b3504ff02805a1596c6a1676fc16fe786a113c27035810c521ea100ea","name":"geojson-screenshot.jpg","type":"image/jpeg","lastModified":1627138317062.546,"size":247883},{"id":"fdf9d5f7bbc62c2889274b4df669e981068883c836cb3ec159aa3d31cb07846e105eeebedf141b702dcce10b9ca390ded3f1bccf3b36d52a7e88d6e9bcb978ec","href":"https://static.observableusercontent.com/files/fdf9d5f7bbc62c2889274b4df669e981068883c836cb3ec159aa3d31cb07846e105eeebedf141b702dcce10b9ca390ded3f1bccf3b36d52a7e88d6e9bcb978ec","name":"allmaps-viewer-screenshot.jpg","type":"image/jpeg","lastModified":1626898217416.62,"size":249470}] 30:{"id":"7ba28c58f15b3f4d","slug":"georeferencing-a-map-by-transcribing-toponyms","title":"Georeferencing a map by transcribing toponyms","thumbnail":"7adffc5b27008a020050961d41d422af419e9456901107930df0c0c12d1c0960","access_level":"public","create_time":"$D2021-06-29T18:08:02.199Z","update_time":"$D2023-05-15T14:12:14.089Z","view_time":null,"first_public_time":"$D2021-07-21T19:11:46.320Z","has_unpublished_edits":null,"fork":false,"stars":17,"starred":false,"owner":{"type":"team","id":"8917b8f0b5bcd50a","login":"allmaps","name":"Allmaps","avatar_url":"https://avatars-next.observableusercontent.com/558e397531ba56d7134b2879485d93fba9d27c9b932e520cb72bea9bdd4133c7","tier":"starter_2024"},"version":673,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Georeferencing a map by transcribing toponyms","cells":[{"id":0,"value":"# Georeferencing a map by transcribing toponyms","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"Georeferencing a map — the process of placing a digitized image of a map in a geospatial context — is usually done by manually finding pairs of corresponding points on both the image and on a map. These points are called ground control points (or GCPs) and can be used to construct a mathematical transformation that converts pixel coordinates to geospatial coordinates.\n\nThis notebook shows how a geocoding service or gazetteer can be combined with [Allmaps](https://allmaps.org) to georeference a map by transcribing place names on the map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"In this notebook, we're using a map of Spain from the [Atlas Der Alten Welt in XVI illuminirten Charten](https://polona.pl/item/atlas-der-alten-welt-in-xvi-illuminirten-charten-nach-den-besten-hulfsmitteln-zum,NzI3NDg5MTQ/6/#info:metadata), found on [Polona](https://polona.pl):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"Polona supports the [IIIF Presentation API 3.0](https://iiif.io/api/presentation/3.0/). The Manifest that contains the map above can be downloaded from the site's IIIF endpoint:\n\n- https://polona.pl/iiif/item/NzI3NDg5MTQ/manifest.json\n\nThe manifest consists of ${manifest.items.length} images, the map of Spain is the ${manifest.items.map((canvas) => canvas.id).indexOf(`${imageUri}/info.json`) + 1}th image in Manifest's [`items`](https://iiif.io/api/presentation/3.0/#items) array:\n\n- ${imageUri}/info.json","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"## Transcriptions\n\nIf we zoom in on the map, we can see that Roman names are used, instead of modern-day place names:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"| Image. | Transcribed toponym | Pixel coordinates |\n|:--------------------|:--------------------|:------------------|\n${transcriptions\n .map((transcription) => `| | ${transcription.toponym} | [${transcription.pixelCoords.join(', ')}] |\\n`)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"In this notebook, the array `transcriptions` is used to store the transcribed toponyns:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"transcriptions = [\n {\n toponym: 'Lapurdum',\n pixelCoords: [4751, 1464]\n },\n {\n toponym: 'Calpe',\n pixelCoords: [3196, 5487]\n },\n {\n toponym: 'Barcino',\n pixelCoords: [6220, 2574]\n },\n {\n toponym: 'Toletum',\n pixelCoords: [3763, 3448]\n },\n {\n toponym: 'Talabriga',\n pixelCoords: [1965, 2898]\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"We can plot these transcriptions on a zoomable image, using [OpenLayers](https://openlayers.org/en/latest/examples/iiif.html). Not all IIIF viewers support IIIF 3.0, but OpenLayers does 💅:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof olMap = displayIIIF(imageUri)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"## Geocoded transcriptions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"Now we can use a historical geocoder like the [World Historical Gazetteer](http://whgazetteer.org/) to find geospatial coordinates for each transcribed Roman place name:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"| Transcribed toponym | Pixel coordinates | Current name | Geospatial coordinates |\n|:--------------------|:------------------|:---------------|:-----------------------|\n${geojson.features\n .map((feature) => `| [${feature.properties.toponym}](${getWHGazetteerUrl(feature.properties.toponym)}) | [${feature.properties.pixelCoords.join(', ')}] | [${feature.properties.name}](https://www.openstreetmap.org/search?query=${feature.properties.name}) | [[${feature.geometry.coordinates.join(', ')}]](https://bertspaan.nl/latlong/#9/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}) |\\n`)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"The array `geocodedTranscriptions` holds the original transcription data, as well as geospatial coordinates:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"geocodedTranscriptions = Promise.all(transcriptions.map((transcription) => getWHGazetteerData(transcription)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"We can turn this array into GeoJSON to easily visualize the data on a map, for example using [geojson.io](${geojsonUrl}):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"geojson = ({\n type: 'FeatureCollection',\n features: geocodedTranscriptions.map((transcription) => ({\n type: 'Feature',\n properties: {\n toponym: transcription.toponym,\n name: transcription.name,\n pixelCoords: transcription.pixelCoords\n },\n geometry: {\n type: 'Point',\n coordinates: transcription.coordinates\n }\n }))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"\n ${await FileAttachment('geojson-screenshot.jpg').image()}\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"## Allmaps Annotation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"Finally, the geocoded transcriptions can be converted to a IIIF maps annotation using the [`@allmaps/annotation`](https://github.com/allmaps/annotation) module:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"annotation = {\n const map = {\n image: {\n uri: imageUri,\n width: imageInfo.width,\n height: imageInfo.height,\n type: 'ImageService2'\n },\n gcps: geocodedTranscriptions.map((transcription) => ({\n image: transcription.pixelCoords,\n world: transcription.coordinates\n })),\n pixelMask: getFullPixelMask(imageInfo.width, imageInfo.height)\n }\n \n return annotationParser.generateAnnotation([map])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"This annotation can be viewed using __[Allmaps Viewer](${viewerUrl})__:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"\n ${await FileAttachment('allmaps-viewer-screenshot.jpg').image()}\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"## Data & constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"imageInfo = fetchJson(`${imageUri}/info.json`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"manifest = fetchJson(manifestUri)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"viewerUrl = `https://viewer.allmaps.org/#data=data:application/json,${encodeURIComponent(JSON.stringify(annotation, null, 2))}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"geojsonUrl = `http://geojson.io/#data=data:application/json,${encodeURIComponent(JSON.stringify(geojson, null, 2))}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"imageUri = 'https://zas.bn.org.pl/iiif/72748914/73540724.tif'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"manifestUri = \"https://polona.pl/api/search-index/search/iiif/3994d921-1ef7-4e12-bd98-498764e22a6a/manifest.json\"\n// Old url: 'https://polona.pl/iiif/item/NzI3NDg5MTQ/manifest.json'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"tableImageDimensions = [350, 100]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"toponymColor = '#FFC742'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"getFullPixelMask = (width, height) => [\n [0, 0],\n [width, 0],\n [width, height],\n [0, height]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"getImageFromTranscription = (tableImageDimensions, transcription) => { \n const scaleFactor = 2\n \n const midX = transcription.pixelCoords[0]\n const midY = transcription.pixelCoords[1]\n \n const x = Math.round(midX - tableImageDimensions[0] * scaleFactor / 2)\n const y = Math.round(midY - tableImageDimensions[1] * scaleFactor / 2)\n\n const region = `${x},${y},${Math.round(tableImageDimensions[0] * scaleFactor)},${Math.round(tableImageDimensions[1] * scaleFactor)}`\n\n return `${imageUri}/${region}/${tableImageDimensions[0]},${tableImageDimensions[1]}/0/native.jpg`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"fetchJson = (url) => fetch(url).then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"getWHGazetteerData = async (transcription) => {\n const toponym = transcription.toponym;\n const results = await fetchJson(getWHGazetteerUrl(toponym));\n\n const firstFeature = results.features[0];\n\n return {\n ...transcription,\n results,\n name: firstFeature.properties.title,\n coordinates: firstFeature.geometry.coordinates\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"getWHGazetteerUrl = (name) => `https://whgazetteer.org/api/index/?name=${name}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"vectorSource = {\n const vectorSource = new ol.source.Vector()\n const vectorLayer = new ol.layer.Vector({\n source: vectorSource,\n style: featureStyle\n })\n\n transcriptions.forEach((transcription, index) => {\n const feature = new ol.Feature({\n toponym: transcription.toponym,\n geometry: new ol.geom.Point([\n transcription.pixelCoords[0],\n -transcription.pixelCoords[1]\n ])\n })\n \n vectorSource.addFeature(feature)\n })\n\n olMap.addLayer(vectorLayer)\n\n return vectorSource\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"featureStyle = (feature) => new ol.style.Style({\n stroke: new ol.style.Stroke({\n color: toponymColor,\n width: 3\n }),\n image: new ol.style.Circle({\n radius: 7,\n fill: new ol.style.Fill({\n color: toponymColor\n })\n }),\n text: textStyle(feature)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"label = (feature) => {\n const properties = feature.getProperties()\n return properties.toponym\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"textStyle = (feature) => new ol.style.Text({\n scale: 1.5,\n text: label(feature),\n fill: new ol.style.Fill({color: '#000'}),\n stroke: new ol.style.Stroke({color: '#fff', width: 2}),\n offsetX: 13,\n offsetY: 13,\n textAlign: 'left'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"css","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"import { displayIIIF, ol, css } from '@bertspaan/iiif-and-openlayers'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"annotationParser = import('https://cdn.skypack.dev/@allmaps/annotation@1.0.0-beta.5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"