Public
Edited
Oct 31, 2022
1 fork
1 star
Paris = {
const container = yield html`<div style="height:800px;">`;
const map = (container.value = new maplibregl.Map({
//interactive: false,
boxZoom: true,
pitch: 0,
bearing: 0,
maplibreLogo: true,
container,
center: [
(overlay.geometry.coordinates[0][0][0] +
overlay.geometry.coordinates[0][2][0]) /
2,
(overlay.geometry.coordinates[0][0][1] +
overlay.geometry.coordinates[0][2][1]) /
2
],
zoom: 9,
style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
scrollZoom: true
}));
map.addControl(new maplibregl.NavigationControl());
map.on("style.load", () => {
map.addSource("overlay", {
type: "image",
url: overlay.properties.icon,
coordinates: overlay.geometry.coordinates[0].slice(0, 4)
});
map.addLayer({
id: "overlay",
type: "raster",
source: "overlay"
});
});
}
txt = (await FileAttachment("eta.kml").text()).replace(
"https://developers.google.com/kml/documentation/images/etna.jpg",
"https://tmcw-drop.s3-us-west-1.amazonaws.com/etna%20(1).jpg"
)
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.
