selection.map(f => f.getId())
viewof selection = {
console.log('SELECTION');
const target = html`<div style="height:300px; width:700px;">`;
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://openlayers.org/en/v5.2.0/examples/data/geojson/countries.geojson",
format: new ol.format.GeoJSON()
})
}),
heat,
],
target,
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
target.value = []; // Initial empty selection.
const select = new ol.interaction.Select();
select.on("select", event => {
target.value = select.getFeatures().getArray();
target.dispatchEvent(new CustomEvent("input"));
})
map.addInteraction(select);
invalidation.then(() => map.dispose());
return target;
}
heat = {
var vector = new ol.layer.Heatmap({
source: new ol.source.Vector({
url: 'https://openlayers.org/en/v5.2.0/examples/data/kml/2012_Earthquakes_Mag5.kml',
format: new ol.format.KML({ extractStyles: false })
}),
blur: 3, // viewof blur.value, // parseInt(blur.value, 10),
radius: 10 // viewof radius.value // parseInt(radius.value, 10)
});
vector.getSource().on('addfeature', function(event) {
var name = event.feature.get('name');
var magnitude = parseFloat(name.substr(2));
event.feature.set('weight', magnitude - 5);
});
return vector;
}
heat.setBlur(blur)
heat.setRadius(radius)
ol = {
// OpenLayers doesn’t publish a build to npm, so we can’t use unpkg. :(
const ol = await require("https://openlayers.org/en/v5.2.0/build/ol.js").catch(() => window.ol);
if (!ol.css) ol.css = document.head.appendChild(html`<link rel=stylesheet href="https://openlayers.org/en/v5.2.0/css/ol.css">`);
return ol;
}
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.
