Public
Edited
Dec 13
4 stars
overture = FileAttachment("overture-15.719999999999999-41.40316010484801-2.1719527461498274.geojson").json()
{
const container = yield htl.html`<div style="height: 600px">`;
const map = L.map(container, {
zoomControl: false,
dragging: false,
scrollWheelZoom: false,
doubleClickZoom: false,
boxZoom: false,
keyboard: false,
touchZoom: false
});
const legend = L.control({ position: "bottomright" });
legend.onAdd = function () {
// Create a container for the legend
const div = L.DomUtil.create("div", "info legend");
const classColors = {
"residential": "#1f77b4",
"commercial": "#ff7f0e",
"industrial": "#2ca02c",
"civic": "#d62728",
"other": "#9467bd",
}
// Generate legend items
Object.keys(classColors).forEach(cls => {
div.innerHTML += `
<i style="background: ${classColors[cls]}; opacity: 0.63; width: 18px; height: 18px; display: inline-block; margin-right: 8px;"></i>
${cls}<br>
`;
});
return div;
};
legend.addTo(map);
const layer = L.geoJSON(overture, {
style: style_buildings,
interactive: false
}).addTo(map);
map.setView([41.404, 2.170], 16.0);
L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
function style_buildings(feature) {
const classColors = {
"residential": "#1f77b4",
"commercial": "#ff7f0e",
"industrial": "#2ca02c",
"civic": "#d62728",
"other": "#9467bd",
}
const buildingClass = feature.properties.class || "other"; // Default to "other" if class is missing
return {
color: "#212121",
weight: 1,
fillColor: classColors[buildingClass] || "#cccccc",
fillOpacity: 0.63
};
}
classCounts = overture.features.reduce((acc, feature) => {
const buildingClass = feature.properties.class || "unknown"; // Default to "unknown" for missing classes
acc[buildingClass] = (acc[buildingClass] || 0) + 1;
return acc;
}, {});
tableData = Object.entries(classCounts).map(([buildingClass, count]) => ({
Class: buildingClass,
Count: count
}));
viewof classCountsTable = Inputs.table(tableData, {
columns: ["Class", "Count"],
sort: "Count",
reverse: true,
width: "30%"
});
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.
