2b:null 2c:["$","title",null,{"children":"Hello, Allmaps Leaflet plugin! | Allmaps | Observable"}] 31:[] 2f:{"id":"849c9777efef6c9b","slug":"leaflet-plugin","title":"Hello, Allmaps Leaflet plugin!","thumbnail":"0cbbf0ddf20a1d5da0d28dcc28589a830d14ee08f7e521bcd4c0a0fa365cf039","access_level":"public","create_time":"$D2023-10-23T10:55:23.022Z","update_time":"$D2026-01-15T14:45:09.330Z","view_time":null,"first_public_time":"$D2023-10-23T10:55:23.022Z","fork":{"id":"21819201cf423c78","slug":"hello-leaflet","title":"Hello, Leaflet","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":6,"starred":false,"owner":{"type":"team","id":"8917b8f0b5bcd50a","login":"allmaps","name":"Allmaps","avatar_url":"https://avatars-next.observableusercontent.com/558e397531ba56d7134b2879485d93fba9d27c9b932e520cb72bea9bdd4133c7","tier":"starter_2024"},"version":847,"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":5,"collection":null,"type":"notebook","body":{"title":"Hello, Allmaps Leaflet plugin!","cells":[{"id":0,"value":"# Hello, Allmaps Leaflet plugin!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"This is a simple notebook to play around with the [Allmaps Leaflet plugin](https://github.com/allmaps/allmaps/tree/develop/packages/leaflet#readme). The plugin works by loading [Georeference Annotations](https://iiif.io/api/georef/extension/georef/) and uses WebGL to show warped [IIIF images](https://iiif.io/) on a [Leaflet](https://leafletjs.com/) map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"You can add a warped map to a Leaflet map with just a few lines of code:\n\n```js\nimport L from 'leaflet'\nimport { WarpedMapLayer } from '@allmaps/leaflet'\n\nconst map = L.map('map', {\n center: [${center.lat.toFixed(6)}, ${center.lng.toFixed(6)}],\n zoom: ${zoom},\n zoomAnimationThreshold: 1\n})\n\nL.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n maxZoom: 18,\n attribution: '© OpenStreetMap contributors'\n}).addTo(map)\n\nconst annotationUrl = '${annotationUrl}'\nconst warpedMapLayer = new WarpedMapLayer(annotationUrl)\n .addTo(map)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":686,"value":"container = yield html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"__You can use [Allmaps Editor](https://editor.allmaps.org) to georeference any digitized map that's available through [IIIF](https://iiif.io). For more information, see [allmaps.org](https://allmaps.org).__","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":156,"value":"viewof annotationUrl = Inputs.text({\n label: \"Annotation URL\",\n value: getUrlParam(hash) || initialAnnotationUrl\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"viewof opacity = Inputs.range([0, 1], {\n label: \"Opacity\",\n step: 0.05,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"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","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof hexColor = Inputs.color({\n label: \"Background color\",\n value: \"#e8dbc0\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"__More examples__ - click any of the URLs to view them in the map above:\n\n

${url}${annotationUrl === url ? ' 📌' : ''}

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"## Functions & constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":549,"value":"mutable center = ({ lat: 51.05445202254464, lng: 3.72488021850586 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"mutable zoom = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"map = {\n const map = L.map(container, {\n center: [51.054452, 3.72488],\n zoom: 10\n // Zoom animations for more than one zoom level are not supported\n // zoomAnimationThreshold: 1\n });\n\n L.tileLayer(\"https://tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution:\n '© OpenStreetMap contributors'\n }).addTo(map);\n\n map.addLayer(warpedMapLayer);\n\n await warpedMapLayer.addGeoreferenceAnnotationByUrl(initialAnnotationUrl);\n\n const bounds = warpedMapLayer.getBounds();\n console.log(bounds);\n map.fitBounds(bounds, {\n padding\n });\n\n map.once(\"moveend\", () => {\n mutable zoom = map.getZoom();\n mutable center = map.getCenter();\n });\n\n invalidation.then(() => map.remove());\n\n return map;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"warpedMapLayer = new AllmapsLeaflet.WarpedMapLayer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"bounds = {\n let bounds = map.getBounds();\n if (warpedMapLayer) {\n warpedMapLayer.resetLayerOptions();\n warpedMapLayer.clear();\n\n await warpedMapLayer.addGeoreferenceAnnotationByUrl(annotationUrl);\n\n bounds = warpedMapLayer.getBounds();\n map.fitBounds(bounds, {\n padding\n });\n\n map.once(\"moveend\", () => {\n mutable zoom = map.getZoom();\n mutable center = map.getCenter();\n });\n }\n return bounds;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"{\n if (warpedMapLayer) {\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","output":"$undefined","database":"$undefined"},{"id":396,"value":"examples = [\n \"https://annotations.allmaps.org/images/9562452c7c431b37\",\n \"https://annotations.allmaps.org/images/73def4ccb56259d3\",\n \"https://annotations.allmaps.org/maps/cf4eb38cfd72a7e5\",\n \"https://annotations.allmaps.org/maps/b0b389ba28fd8ccc\",\n \"https://annotations.allmaps.org/maps/6284119995e76a36\",\n \"https://annotations.allmaps.org/manifests/ea216d5d18cd7451\",\n \"https://annotations.allmaps.org/maps/877a4c8b007c9971\",\n \"https://annotations.allmaps.org/images/3d3cb6e11cb24f96\",\n \"https://annotations.allmaps.org/maps/dd8af01a1789ed7e\",\n \"https://annotations.allmaps.org/manifests/e8d86d832da02cf5\",\n \"https://annotations.allmaps.org/manifests/e3fcf51817b03639\",\n \"https://annotations.allmaps.org/maps/a9458d2f895dcdfb\",\n \"https://annotations.allmaps.org/images/d180902cb93d5bf2\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"hash = Generators.observe((notify) => {\n // From: https://observablehq.com/@jashkenas/url-querystrings-and-hash-parameters\n const hashchange = () => notify(location.hash);\n hashchange();\n addEventListener(\"hashchange\", hashchange);\n return () => removeEventListener(\"hashchange\", hashchange);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"getUrlParam = (hash) => {\n const searchParams = new URLSearchParams(hash.slice(1));\n return searchParams.get(\"url\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"initialAnnotationUrl = getUrlParam(location.hash) ||\"https://annotations.allmaps.org/images/9562452c7c431b37\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"padding = [25, 25]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"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(\n (L._style = html``)\n );\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"AllmapsLeaflet = import(\"https://esm.sh/@allmaps/leaflet@1.0.0-beta.52\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"