viewof map = {
const target = html`<div style="height:500px;">`;
yield target; // Give the container dimensions.
const map = target.value = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
target,
view: new ol.View({
center: ol.proj.fromLonLat([0, 0]),
zoom: 1.8
})
});
invalidation.then(() => map.dispose());
return target;
}
vectorLayer = {
let redCircle = new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({color: 'rgb(255,0,0,.5)'}),
});
let redStyle = new ol.style.Style({ image: redCircle });
let vectorSource = new ol.source.Vector({
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week.geojson",
format: new ol.format.GeoJSON()
});
const vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: redStyle
});
return vectorLayer;
}
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.
