Published
Edited
May 27, 2021
3 forks
6 stars
{
const container = html`<div style="height:400px;">`;
yield container;
let map = new L.map(container,{maxZoom:4}).setView([38,-100],3)
const p = new pmtiles.PMTiles("https://protomaps-static.sfo3.digitaloceanspaces.com/osm_carto.pmtiles")
p.leafletLayer({attribution:'© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'}).addTo(map)
}
tileset = new pmtiles.PMTiles("https://protomaps-static.sfo3.digitaloceanspaces.com/PowersOfTwo.pmtiles")
metadata = await tileset.metadata()
startPoint = {
let bounds = metadata['bounds'].split(',')
let minX = +bounds[0]
let minY = +bounds[1]
let maxX = +bounds[2]
let maxY = +bounds[3]
return [(minY+maxY)/2,(minX+maxX)/2]
}
{
return await tileset.getZxy(0,0,0)
}
{
const container = html`<div style="height:400px;background-color:black">`;
yield container;
let map = new L.map(container,{maxZoom:14}).setView(startPoint,14)
tileset.leafletLayer({attribution:metadata.attribution}).addTo(map)
}
{
let url = await FileAttachment('osm_carto@3.pmtiles').url()
let p = new pmtiles.PMTiles(url)
return await p.metadata()
}
pmtiles = require("pmtiles@0.2.1").catch(() => window.pmtiles)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
