Published
Edited
Sep 15, 2021
Insert cell
Insert cell
d3 = require ("d3@5")


Insert cell
Insert cell
L = require('leaflet@1.2.0')

Insert cell
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
Insert cell
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);
}
Insert cell
Insert cell
//Sydney
lat = -33.866685

//chatswood
//lat =-33.795933

//Parramatta
//lat = -33.814055

//Wollongong
//lat=-34.427989

//Hurstville
//lat = -33.967829
Insert cell
//Sydney
lon = 151.201458

//chatswood
//lon = 151.186905

//Parramatta
//lon = 151.001331

//Wollongong
//lon=150.891273

//Hurstville
//lon=151.100023
Insert cell
Insert cell
Insert cell
bbox = ({botLat:lat-0.05,botLon:lon-0.05,topLat:lat+0.05,topLon:lon+0.05})
Insert cell
default_query1 = `[out:json][timeout:25][bbox: ${bbox.botLat}, ${bbox.botLon}, ${bbox.topLat}, ${bbox.topLon}];
node[amenity = hospital];
out;`
Insert cell
Insert cell
Insert cell
hospitals = queryOverpass(default_query1)
Insert cell
gp = queryOverpass(default_query2)
Insert cell
Insert cell
map = {
let container = DOM.element('div',{style:`width:${width/1.6}px;height:${width/1.6}px`});
yield container;
let map = L.map(container).setView(cen, 13);
//set the map tiles to a
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);

//add circle at 2km and 5km radius
var circle1 = L.circle([lat, lon], {
color: 'grey',
fillColor: 'orange',
fillOpacity: 0.2,
radius: 2000
}).addTo(map);

var circle2 = L.circle([lat, lon], {
color: 'grey',
fillColor: 'orange',
fillOpacity: 0.1,
radius: 5500
}).addTo(map);
//create a custom icon for hospital
var iconH = L.icon({
iconUrl: 'https://icons.veryicon.com/png/o/business/wb-legend-of-shanghai-ocean-bearing-body/wb_-hospital.png',
iconSize:[40,40]
});
hospitals.forEach((h)=>{
const marker = L.marker([h.lat, h.lon],{icon:iconH}).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();
})
gp.forEach((g)=>{
const marker = L.marker([g.lat, g.lon]).addTo(map);
const note = g.tags.note ? `<br>${g.tags.note}` : "" // This is a ternary operatory, y'know, if you like tricks
marker.bindPopup(`🏥<strong>${g.tags.name}</strong>${note}`);//.openPopup();
})
}
Insert cell

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.
Learn more