Also listed in…
leaflet
viewof rows = Table(geojson.features)
viewof properties = Table(rows.map(d => d.properties))
[...new Set(rows.map(d => d.properties.type))] // Unique "properties.type"s
rows.filter(d => d.properties.type == 'node')
highway_types = [...new Set(highways.map(d => d.highway))]
viewof highways = Table(rows.map(d => d.properties.tags).filter(d => d.highway))
viewof not_highway = Table(rows.map(d => d.properties.tags).filter(d => !(d.highway)))
layer = {
const style = {
"color": "crimson",
"weight": 5,
"opacity": 0.65
};
function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.tags && feature.properties.tags.name) {
layer.bindPopup(feature.properties.tags.name);
} else {
layer.bindPopup(feature.properties.type + " id: " + feature.properties.id)
}
}
const layer = L.geoJSON([geojson], {
style: style,
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 4,
fillColor: "blue",
stroke: "black",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.5
});
}
}).addTo(map);
map.fitBounds(layer.getBounds(), {padding: [20, 20]});
invalidation.then(() => map.removeLayer(layer));
return layer
}
geojson = queryOverpassGeoJSON(query)
function queryOverpassGeoJSON(query) {
mutable report = md`Please wait...`;
return new Promise((resolve, reject) => {
queryOverpass(query, (error, data) => {
if (error) {
mutable report = error;
reject(error);
} else {
mutable report = md`${data.features.length} features returned.`;
resolve(data);
}
});
});
}
{
viewof query.value = choice ? queries[choice] : null;
viewof query.dispatchEvent(new Event('input'))
return md`This cell links the Radio button and the TextArea submit button.`
}
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.
