map44GeoJSONContents = await FileAttachment("44.json").json()
wrapHTML(
generateHTMLlegend(
firstMultipolygonPropertiesOutput(
filterFeatureCollectionForFRIMapping("UG", map44GeoJSONContents)
)
)
)
map = {
const container = html`<div style="height:600px;">`;
yield container;
const ugandaCenter = [1.3733, 32.2903];
// Set up the map centered around Uganda
const map = L.map(container).setView(ugandaCenter, 7);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
"© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
new L.GeoJSON(
filterFeatureCollectionForFRIMapping("UG", map44GeoJSONContents)
).addTo(map);
// new L.GeoJSON(
// filterFeatureCollectionForFRIMapping("ALL", map44GeoJSONContents)
// ).addTo(map);
// Add a simple legend
const legend = L.control({ position: "bottomleft" });
legend.onAdd = function (map) {
const div = L.DomUtil.create("div", "custom-legend");
// Add content to your legend
div.innerHTML += generateHTMLlegend(
firstMultipolygonPropertiesOutput(
filterFeatureCollectionForFRIMapping("UG", map44GeoJSONContents)
)
);
return div;
};
legend.addTo(map);
}
function generateHTMLlegend(targetMultipolygon) {
const formatNumber = d3Format.format(",");
const formattedPopulation = formatNumber(targetMultipolygon.adu22_sum);
const formattedDensity = formatNumber(targetMultipolygon.all22_mean);
const formattedAdultPopulation = formatNumber(targetMultipolygon.adu22_sum);
const formattedPopulationWithDensityCut = formatNumber(
targetMultipolygon.d400_sum
);
const roundedDensity = Math.round(targetMultipolygon.all22_mean);
const roundedAdultPopulation = Math.round(targetMultipolygon.adu22_sum);
const roundedPopulationWithDensityCut = Math.round(
targetMultipolygon.d400_sum
);
const htmlTemplate = `
<div>
<div>${polygonSVG}: Area covered by all emitters for population calculations</div>
<div><strong>Country of Emitters</strong>: ${targetMultipolygon.COUNTRY},</div>
<div><strong>Population</strong> (all22_sum): ${formattedPopulation} <em>the total population, 2022 estimates</em></div>
<div><strong>Density</strong> (all22_mean): ${roundedDensity} <em>average square km people per total population, 2022 estimates</em> </div>
<div><strong>Adult Population</strong> (adu22_sum): ${formattedAdultPopulation} <em>adult population, 2022 estimates</em> </div>
<div><strong>Population with Density Cut</strong> (d400_sum): ${formattedPopulationWithDensityCut} <em>adult population with a filter to remove dense square kilometers with more than 400 people, 2022 estimates</em> </div>
</div>
`;
return htmlTemplate;
// Jigsa, in regular javascript: remove "html" before the next line.
return html`<div>
<img src="${polygonSVG}" alt="simple circle to represent map polygons"/>
<div><strong>Country</strong>: ${targetMultipolygon.COUNTRY},</div>
<div><strong>Population</strong> (all22_sum): ${targetMultipolygon.adu22_sum} <em>the total population, 2022 estimates</em></div>
<div><strong>Density</strong> (all22_mean): ${targetMultipolygon.all22_mean} <em>average square km pop per total population, 2022 estimates</em> </div>
<div><strong>Adult Population</strong> (adu22_sum): ${targetMultipolygon.all22_mean} <em>adult population, 2022 estimates</em> </div>
<div><strong>Population with Density Cut</strong> (d400_sum): ${targetMultipolygon.all22_mean} <em>adult population with a filter to remove dense square kilo meters with more than 400 people, 2022 estimates</em> </div>
</div>`;
}
function firstMultipolygonPropertiesOutput(inputFeatureCollection) {
/* The "?.[]" combined operator and "?." operator allow you to not crash if these values are not found
The ?? operator provides this value if there is an error in retrieving the other values.
In this basic case, I returned 0 for each value we will display
*/
const geoJSONproperties = inputFeatureCollection?.features?.[0]
?.properties ?? { all22_sum: 0, all22_mean: 0, adu22_sum: 0, d400_sum: 0 };
return geoJSONproperties;
}
function filterFeatureCollectionForFRIMapping(
interestedCountryCodeTwoLetter = "ALL",
geoJSONFeatureCollection
) {
/* get only the features array from the FeatureCollection */
const featuresArrayOnly = geoJSONFeatureCollection.features;
/* if ALL, then just return the original value */
if (interestedCountryCodeTwoLetter === "ALL") {
return geoJSONFeatureCollection;
}
/* Otherwise, now filter the features array to only keep the polygons that
are marked with a GID_0 property
*/
const filteredFeatureArray = featuresArrayOnly.filter(
(n) =>
n.properties["GID_0"] ===
africanCountryCodes[interestedCountryCodeTwoLetter]
);
/*
now put the resulting feature(s) back into the original FeatureCollection.
Object.assign combines javascript objects in the order they're listed,
in this case, overwriting the features property with the filtered value.
Using modern javascript, you can also use ... to accomplish the same thing.
*/
return Object.assign({}, geoJSONFeatureCollection, {
features: filteredFeatures
});
}
filteredFeatures = map44GeoJSONContents.features.filter(
(n) => n.properties["GID_0"] === "UGA"
)
filteredFeatureCollection = Object.assign({}, map44GeoJSONContents, {
features: filteredFeatures
})
outMultipolygon = firstMultipolygonPropertiesOutput(filteredFeatureCollection)
${wrapHTML(generateHTMLlegend(outMultipolygon))}
filterFeatureCollectionForFRIMapping("UG", map44GeoJSONContents)
d3Format = import("https://cdn.jsdelivr.net/npm/d3-format@3/+esm")
function wrapHTML(targetMultipolygons) {
return html`${targetMultipolygons}`;
}
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.
