viewof selection = {
const target = html`<div style="height: 600px;">`;
yield target; // Give the container dimensions.
const map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: new ol.source.Vector({
url: "https://raw.githubusercontent.com/openlayers/openlayers/main/examples/data/topojson/fr-departments.json",
format: new ol.format.TopoJSON()
})
})
],
target,
view: new ol.View({
center: ol.proj.transform([2, 46.84], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
target.value = []; // Initial empty selection.
const select = new ol.interaction.Select();
select.on("select", event => {
target.value = select.getFeatures().getArray();
target.dispatchEvent(new Event("input", {bubbles: true}));
})
map.addInteraction(select);
invalidation.then(() => map.dispose());
return target;
}
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.
