map = { const container = html`

` yield container const map = L.map(container) const tileSource = { url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', 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' } L.tileLayer(tileSource.url, { attribution: tileSource.attribution }).addTo(map) function onEachFeature (feature, layer) { const properties = feature.properties const imageId = properties.imageId const imageUri = properties.imageUri const manifest = properties.manifests[0] const manifestId = manifest && manifest.id const manifestUri = manifest && manifest.uri let annotationUrl if (manifest) { annotationUrl = `https://annotations.allmaps.org/manifests/${manifestId}` } else { annotationUrl = `https://annotations.allmaps.org/images/${imageId}` } let editorUrl if (manifestUri || imageUri) { editorUrl = `https://editor.allmaps.org/#/?url=${encodeURIComponent(manifestUri || imageUri)}` } const viewerUrl = `https://viewer.allmaps.org/#data=data%3Atext%2Fx-url%2C${encodeURIComponent(annotationUrl)}` const html = `

${editorUrl ? `

Open in Editor

` : ''}

Open Annotation

${manifestUri ? `

Open IIIF Manifest

` : ''}` layer.bindPopup(html) } const geojsonLayer = L.geoJSON(geoJsonSortedByArea, { style, onEachFeature }).addTo(map) map.fitBounds(geojsonLayer.getBounds()) }