ol = require('openlayers@4')
html`<link href='https://unpkg.com/openlayers@4.6.5/css/ol.css' rel='stylesheet' />`
map = {
let map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: html`<div style='height:500px;'></div>`,
view: new ol.View({
center: ol.proj.fromLonLat(center),
zoom: 7
})
});
setTimeout(() => map.updateSize(), 1);
return map;
}
vectorSource = {
var vectorSource = new ol.source.Vector();
var circleLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(circleLayer);
return vectorSource
}
{
data.forEach(({Count, Latitude, Longitude}) => {
Count = parseFloat(Count)
Latitude = parseFloat(Latitude)
Longitude = parseFloat(Longitude)
const radius = Count * 3000
const coord = ol.proj.fromLonLat([Longitude, Latitude])
vectorSource.addFeature(new ol.Feature(new ol.geom.Circle(coord, radius)))
})
}
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.
