Public
Edited
Mar 1, 2023
Importers
2 stars
Insert cell
Insert cell
base = new URL(
`https://cdn.skypack.dev/ol@${packageMetadata["dist-tags"].latest}/`
).href
Insert cell
packageMetadata = d3.json("https://registry.npmjs.com/ol", {
headers: {
accept: "application/vnd.npm.install-v1+json"
}
})
Insert cell
olCss = htl.html`<link
${{
crossorigin: "",
rel: "stylesheet",
href: new URL("ol.css", base)
}}>`
Insert cell
modNames = `ol
ol/source/OSM
ol/source/Vector
ol/source/VectorTile
ol/source/TileJSON
ol/geom
ol/layer
ol/proj
ol/format
ol/tilegrid
ol/interaction
ol/control
ol/style`.split("\n")
Insert cell
ol = Promise.all(
modNames.map(async (path) => {
const url = new URL(path.replace(/^ol(\/)?/, ""), base);
const key = path.replaceAll("/", ".");
const value = import(url).then((m) => m.default ?? { ...m });
return [key, await value];
})
).then((mods) => _.zipObjectDeep(..._.unzip(mods)).ol)
Insert cell
new ol.Map({
target: yield htl.html`<div style="height:500px">`,
layers: [new ol.layer.Tile({ source: new ol.source.OSM() })],
view: new ol.View({ center: [0, 0], zoom: 2 })
})
Insert cell

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.
Learn more