Published
Edited
Jan 19, 2022
Closest Points
map = {
const container = html`<div style="height:600px;">`;
let map = null
const attributionLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
})
const reversedPivot = pivot.slice().reverse()
const pivotCircle = L.circle(reversedPivot)
const pivotMarker = L.marker(reversedPivot)
const redCircleIcon = L.icon({})
const targetMarkers = sortedDataset.map(d => L.marker([d.lat, d.long]))
container.update = function (radius) {
if(map) {
pivotCircle.setRadius(radius * 1000)
pivotCircle.addTo(map)
pivotMarker.addTo(map)
sortedDataset.forEach((d, i) => {
if (d.distance <= radius) {
targetMarkers[i].bindPopup(d.label).addTo(map)
} else {
targetMarkers[i].remove()
}
})
}
}
yield container;
map = L.map(container).setView(reversedPivot, 10)
attributionLayer.addTo(map)
}
map.update(radius)
dataset = file.text()
.then(text => d3.csvParse(text, d => ({
lat: d[fields.lat],
long: d[fields.long],
label: d[fields.label],
})))
decoratedDataset = dataset.map(d => Object.assign(d, {
distance: d3.geoDistance([d.long, d.lat], pivot) * EARTH_RADIUS_KM
}))
sortedDataset = decoratedDataset.slice().sort((a, b) => a.distance - b.distance)
EARTH_RADIUS_KM = 6371;
pivot = parsePoint(coordinates) || [13.237771192296224, 46.06596653564763]
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
L = await require("leaflet@1.2.0")
d3 = require('d3@7')
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.
