Published
Edited
Aug 27, 2021
1 star
d3 = require("d3@5")
L = require('leaflet@1.2.0')
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
function queryOverpass(query) {
let overpass_api_url = `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(query)}`
return d3.json(overpass_api_url).then(data => data.elements);
}
bbox = ({botLat:-34.107, botLon:150.801, topLat:-33.712, topLon:151.381})
boxCentre = [(bbox.botLat + bbox.topLat)/2, (bbox.botLon + bbox.topLon)/2]
default_query = `[out:json][timeout:25][bbox: ${bbox.botLat}, ${bbox.botLon}, ${bbox.topLat}, ${bbox.topLon}];
node[amenity=hospital];
out;`
hospitals = queryOverpass(default_query)
map = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container).setView(boxCentre, 10); // initializes the map, sets zoom & coordinates
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
hospitals.forEach((h)=>{
const marker = L.marker([h.lat, h.lon]).addTo(map);
const note = h.tags.note ? `<br>${h.tags.note}` : "" // This is a ternary operatory, y'know, if you like tricks
marker.bindPopup(`🏥<strong>${h.tags.name}</strong>${note}`);//.openPopup();
})
}
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.
