2e:["$","title",null,{"children":"XYZ map tiles for IIIF maps georeferenced with Allmaps | Allmaps | Observable"}] 33:T460,viewof leaflet = { const container = html`

` yield container const map = L.map(container, { maxZoom }) L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors', maxNativeZoom: 18, maxZoom }).addTo(map) let allmapsLayer let opacity = 1 if (urlTemplate) { allmapsLayer = L.tileLayer(urlTemplate, { maxZoom }).addTo(map) function updateOpacity (data) { opacity = data.target.value allmapsLayer.setOpacity(opacity) } map.fitBounds(bounds) map.on('keydown', (event) => { if (isSpace(event)) { allmapsLayer.setOpacity(0) } }) map.on('keyup', (event) => { if (isSpace(event)) { allmapsLayer.setOpacity(opacity) } }) viewof opacity.addEventListener('input', updateOpacity) } return Generators.disposable(container, () => { if (allmapsLayer) { viewof opacity.removeEventListener('input', updateOpacity) } }) }34:T9a9,

Important note

The Allmaps Tile Server costs money to run. For each map tile that’s requested by a client, a cloud server has to download one or more IIIF tiles, process and warp them, and send the resulting PNG back to the client.

An important part of the power and simplicity of Allmaps lies in the fact that its components only need a IIIF server and a georeference annotation to function. Allmaps Editor and Allmaps Viewer are static websites that function by passing IIIF objects or JSON data in their URLs. However, the Allmaps Tile Server works differently and does depend on code running on a server. I think it’s worth it – the Allmaps Tile Server makes it easier to view and compare georeferenced digitized maps with all GIS software, across institutions.

If you can, I encourage you to use the plugins for OpenLayers or Leaflet (coming soon!) instead. These plugins can warp maps directly in the browser. This is much faster and more efficient. The Allmaps Tile Server is intended for use in desktop GIS applications or in existing web map applications that you don’t control or that are difficult to update (but that do support loading XYZ template URLs).

You can also use Allmaps Viewer to view warped maps. Allmaps Viewer uses the OpenLayers plugin, this plugin warps georeferenced maps using WebGL.

Allmaps Tile Server runs on Cloudflare Workers.

The development and hosting of the Allmaps Tile Server are sponsored by OpenHistoricalMap.

Terms of use

You can use the current alpha version of the Allmaps Tile Server for testing purposes. Things might break, might be slow, or might stop working. My goal is to finish a production-ready version in the fall of 2022.

If you think the Allmaps Tile Server (or other parts of Allmaps) can be useful for your institution, send me an email or a message on Twitter.

35:T426,You can, for example, use this URL template in GIS software like [QGIS](https://docs.qgis.org/3.16/en/docs/user_manual/managing_data_source/opening_data.html#using-xyz-tile-services), [JOSM](https://learnosm.org/en/josm/josm-adding-imagery/) or the iD editor found on [OpenHistoricalMap](https://www.openhistoricalmap.org/edit?editor=id) and [OpenStreetMap](https://www.openstreetmap.org/edit=id) (Go to _Edit_ mode, log in, select _Background Settings_

, then select _Custom_ under _Backgrounds_ and click on

). And if you don’t want to wait until I finish the Allmaps Leaflet plugin, use this code to add a new [Leaflet TileLayer](https://leafletjs.com/reference-1.7.1.html#tilelayer): ```js const map = L.map('map') L.tileLayer('${urlTemplate}').addTo(map) map.fitBounds(${JSON.stringify(bounds)}) ```36:[] 31:{"id":"2a53edf0034a76e6","slug":"allmaps-tile-server","title":"XYZ map tiles for IIIF maps georeferenced with Allmaps","thumbnail":"4509955f9c729e1e09d2dd9481c8594bf93ae0c7cb06ea08fa3d04417477291d","access_level":"public","create_time":"$D2021-09-29T15:29:58.690Z","update_time":"$D2024-04-28T11:19:26.711Z","view_time":null,"first_public_time":"$D2021-10-12T14:51:37.860Z","has_unpublished_edits":null,"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":1022,"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":0,"collection":null,"type":"notebook","body":{"title":"XYZ map tiles for IIIF maps georeferenced with Allmaps","cells":[{"id":438,"value":"# XYZ map tiles for IIIF maps georeferenced with Allmaps\n\n[Allmaps](https://allmaps.org/) can georeference and warp any map that’s available through [IIIF](https://iiif.io/). \n\nThese maps can be viewed with [Allmaps Viewer](https://viewer.allmaps.org) or with an [OpenLayers plugin](https://github.com/allmaps/allmaps/tree/main/packages/openlayers) (I’m also working on a plugin for [Leaflet](https://leafletjs.com/)).\n\nTo enable users to view these maps with traditional GIS software like QGIS or ArcGIS or in existing web mapping applications, I’ve built the Allmaps Tile Server. The Allmaps Tile Server is a Node.js proxy server that transforms [IIIF tiles](https://iiif.io/api/image/3.0/#54-tiles) to [XYZ map tiles](https://en.wikipedia.org/wiki/Tiled_web_map). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"You can try the Allmaps Tile Server by loading a IIIF Manifest or Image URI in the input box below. If the IIIF image has been georeferenced with Allmaps before, tiles produced by the Allmaps Tile Server will be loaded and shown automatically. If not, you can use [Allmaps Editor](${editorUrl}) to georeference the map and try again. You can also pick, for example, ${examples.map((url, index) => {\n const last = index === examples.length - 1\n const a = htl.html`${last ? 'or ' : ''}this${last ? ' map.' : ', '}`\n a.onclick = (event) => setExampleUrl(event, url)\n return a \n})}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"viewof iiifUri = selectUri(exampleUrl || urlIiifUri || defaultIiifUri)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"viewof imageUri = selectImageUri(iiifUri)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"viewof map = selectMap(imageUri.uri, iiifUri)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"

The current version of Allmaps Editor allows anyone to edit any georeferenced map. All these edits are automatically published on Allmaps’ annotation server. This means that anyone can – on purpose or by accident – break a previously perfectly georeferenced map. I’ll work on a more sophisticated workflow soon! If a map from the list of examples above doesn’t work, you can fix the map in Allmaps Editor.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"viewof opacity = {\n const value = 100\n \n const html = htl.html`\n

${Inputs.range([0, 1], {value, step: 0.01, label: 'Map opacity'})}

You can also use the space bar to toggle the visibility of the warped map layer!

`\n \n html.oninput = (event) => {\n if (event) {\n html.value = parseInt(event.target.value)\n }\n }\n html.value = value\n \n html.oninput()\n return html\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"You can open the map above in a [dedicated map viewer](${xyzUrl}) or use [this link to share this notebook](${createNotebookUrl(iiifUri)}) with the URI that’s currently loaded.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"To use the warped map in your geospatial software of choice, copy the following URL template:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"${urlTemplate}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"viewof clipboard = {\n urlTemplate\n return Inputs.button('Copy URL template to clipboard')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"## Workflow\n\n1. Find a map that’s available through IIIF and copy the URI of its IIIF Manifest or Image. For example, you can have a look at the map collection of the [Library of Congress](https://www.loc.gov/maps);\n2. Use the IIIF URI of the map you want to georeference in [Allmaps Editor](https://editor.allmaps.org/);\n3. Once the map has been georeferenced, paste the same IIIF URI in this notebook;\n4. Copy the URL template of the generated XYZ map tile layer;\n5. And use it!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"