2f:T426,map = { const container = html`

`; 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: "© OpenStreetMap 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); }30:Tcd1,//ISO 3166-1 alpha-2 to alpha-3 codes allCountryCodesConversion = ({ AF: "AFG", AX: "ALA", AL: "ALB", DZ: "DZA", AS: "ASM", AD: "AND", AO: "AGO", AI: "AIA", AQ: "ATA", AG: "ATG", AR: "ARG", AM: "ARM", AW: "ABW", AU: "AUS", AT: "AUT", AZ: "AZE", BS: "BHS", BH: "BHR", BD: "BGD", BB: "BRB", BY: "BLR", BE: "BEL", BZ: "BLZ", BJ: "BEN", BM: "BMU", BT: "BTN", BO: "BOL", BA: "BIH", BW: "BWA", BV: "BVT", BR: "BRA", IO: "IOT", BN: "BRN", BG: "BGR", BF: "BFA", BI: "BDI", KH: "KHM", CM: "CMR", CA: "CAN", CV: "CPV", KY: "CYM", CF: "CAF", TD: "TCD", CL: "CHL", CN: "CHN", CX: "CXR", CC: "CCK", CO: "COL", KM: "COM", CG: "COG", CD: "COD", CK: "COK", CR: "CRI", CI: "CIV", HR: "HRV", CU: "CUB", CY: "CYP", CZ: "CZE", DK: "DNK", DJ: "DJI", DM: "DMA", DO: "DOM", EC: "ECU", EG: "EGY", SV: "SLV", GQ: "GNQ", ER: "ERI", EE: "EST", ET: "ETH", FK: "FLK", FO: "FRO", FJ: "FJI", FI: "FIN", FR: "FRA", GF: "GUF", PF: "PYF", TF: "ATF", GA: "GAB", GM: "GMB", GE: "GEO", DE: "DEU", GH: "GHA", GI: "GIB", GR: "GRC", GL: "GRL", GD: "GRD", GP: "GLP", GU: "GUM", GT: "GTM", GG: "GGY", GN: "GIN", GW: "GNB", GY: "GUY", HT: "HTI", HM: "HMD", VA: "VAT", HN: "HND", HK: "HKG", HU: "HUN", IS: "ISL", IN: "IND", ID: "IDN", IR: "IRN", IQ: "IRQ", IE: "IRL", IM: "IMN", IL: "ISR", IT: "ITA", JM: "JAM", JP: "JPN", JE: "JEY", JO: "JOR", KZ: "KAZ", KE: "KEN", KI: "KIR", KP: "PRK", KR: "KOR", KW: "KWT", KG: "KGZ", LA: "LAO", LV: "LVA", LB: "LBN", LS: "LSO", LR: "LBR", LY: "LBY", LI: "LIE", LT: "LTU", LU: "LUX", MO: "MAC", MK: "MKD", MG: "MDG", MW: "MWI", MY: "MYS", MV: "MDV", ML: "MLI", MT: "MLT", MH: "MHL", MQ: "MTQ", MR: "MRT", MU: "MUS", YT: "MYT", MX: "MEX", FM: "FSM", MD: "MDA", MC: "MCO", MN: "MNG", ME: "MNE", MS: "MSR", MA: "MAR", MZ: "MOZ", MM: "MMR", NA: "NAM", NR: "NRU", NP: "NPL", NL: "NLD", NC: "NCL", NZ: "NZL", NI: "NIC", NE: "NER", NG: "NGA", NU: "NIU", NF: "NFK", MP: "MNP", NO: "NOR", OM: "OMN", PK: "PAK", PW: "PLW", PS: "PSE", PA: "PAN", PG: "PNG", PY: "PRY", PE: "PER", PH: "PHL", PN: "PCN", PL: "POL", PT: "PRT", PR: "PRI", QA: "QAT", RE: "REU", RO: "ROU", RU: "RUS", RW: "RWA", BL: "BLM", SH: "SHN", KN: "KNA", LC: "LCA", MF: "MAF", PM: "SPM", VC: "VCT", WS: "WSM", SM: "SMR", ST: "STP", SA: "SAU", SN: "SEN", RS: "SRB", SC: "SYC", SL: "SLE", SG: "SGP", SX: "SXM", SK: "SVK", SI: "SVN", SB: "SLB", SO: "SOM", ZA: "ZAF", GS: "SGS", SS: "SSD", ES: "ESP", LK: "LKA", SD: "SDN", SR: "SUR", SJ: "SJM", SZ: "SWZ", SE: "SWE", CH: "CHE", SY: "SYR", TW: "TWN", TJ: "TJK", TZ: "TZA", TH: "THA", TL: "TLS", TG: "TGO", TK: "TKL", TO: "TON", TT: "TTO", TN: "TUN", TR: "TUR", TM: "TKM", TC: "TCA", TV: "TUV", UG: "UGA", UA: "UKR", AE: "ARE", GB: "GBR", US: "USA", UM: "UMI", UY: "URY", UZ: "UZB", VU: "VUT", VE: "VEN", VN: "VNM", VG: "VGB", VI: "VIR", WF: "WLF", EH: "ESH", YE: "YEM", ZM: "ZMB", ZW: "ZWE" })31:T968,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 = `

${polygonSVG}: Area covered by all emitters for population calculations

Country of Emitters: ${targetMultipolygon.COUNTRY},

Population (all22_sum): ${formattedPopulation} the total population, 2022 estimates

Density (all22_mean): ${roundedDensity} average square km people per total population, 2022 estimates

Adult Population (adu22_sum): ${formattedAdultPopulation} adult population, 2022 estimates

Population with Density Cut (d400_sum): ${formattedPopulationWithDensityCut} adult population with a filter to remove dense square kilometers with more than 400 people, 2022 estimates

`; return htmlTemplate; // Jigsa, in regular javascript: remove "html" before the next line. return html`

Country: ${targetMultipolygon.COUNTRY},

Population (all22_sum): ${targetMultipolygon.adu22_sum} the total population, 2022 estimates

Density (all22_mean): ${targetMultipolygon.all22_mean} average square km pop per total population, 2022 estimates

Adult Population (adu22_sum): ${targetMultipolygon.all22_mean} adult population, 2022 estimates

Population with Density Cut (d400_sum): ${targetMultipolygon.all22_mean} adult population with a filter to remove dense square kilo meters with more than 400 people, 2022 estimates

`; }32:T446,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 }); }33:[{"id":"70232743389cf70254765b858b923167bd82ab44c60f0fab96a8e1659a83d64ea3ffd99a1ff4a947b2221dcfab88ad5555a8abf8189d5ea7be092a236fba3b77","href":"https://static.observableusercontent.com/files/70232743389cf70254765b858b923167bd82ab44c60f0fab96a8e1659a83d64ea3ffd99a1ff4a947b2221dcfab88ad5555a8abf8189d5ea7be092a236fba3b77","name":"99.json","type":"application/json","lastModified":1702479500778.921,"size":856722},{"id":"e081a0da9ac2d607aebef0b9a0e0e4d6a9379aabc6e5410365e5b8a74d1b70b6ab6904566de941c11f19a77605954e4209fd577ec0a25023830e950fbd095bf2","href":"https://static.observableusercontent.com/files/e081a0da9ac2d607aebef0b9a0e0e4d6a9379aabc6e5410365e5b8a74d1b70b6ab6904566de941c11f19a77605954e4209fd577ec0a25023830e950fbd095bf2","name":"44.json","type":"application/json","lastModified":1702481035020.266,"size":16228904}] 2d:{"title":"","cells":[{"id":188,"value":"Load the GeoJSON file attachment contents into a variable:","pinned":false,"hidden":false,"mode":"md"},{"id":160,"value":"map44GeoJSONContents = await FileAttachment(\"44.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"## Introduction to the notebook\n\nWhen moving this code, for commas, please be sure to add D3 or D3-format (https://www.npmjs.com/package/d3-format) library. Also include the circle SVG element farther below.\n\nPlease double check the 2 letter standard below to make sure they're the same 2 letter code standard used by FRI.\n\nPlease ignore `wrapHTML()`, it is just for this website. \n\nThese are the functions I put together to demonstrate how to format the numbers in GeoJSON for presentation in a map:","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"wrapHTML(\n generateHTMLlegend(\n firstMultipolygonPropertiesOutput(\n filterFeatureCollectionForFRIMapping(\"UG\", map44GeoJSONContents)\n )\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"# Hello, Leaflet\n\nRef. https://leafletjs.com/","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":" ","pinned":false,"hidden":false,"mode":"html"},{"id":205,"value":"### Country Code Conversion Objects:\n \n > ISO 3166-1 alpha-2 to alpha-3 codes.\n> \n > Please review this table of conversions to make sure the standard matches. There are many 2 letter standards. If not, you may need to adjust the object.\n>\n> These are used in `filterFeatureCollectionForFRIMapping()` on the line: `africanCountryCodes[interestedCountryCodeTwoLetter]`","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"// ISO 3166-1 alpha-2 to alpha-3 codes\nafricanCountryCodes = ({\n DZ: \"DZA\",\n AO: \"AGO\",\n BJ: \"BEN\",\n BW: \"BWA\",\n BF: \"BFA\",\n BI: \"BDI\",\n CV: \"CPV\",\n CM: \"CMR\",\n CF: \"CAF\",\n TD: \"TCD\",\n KM: \"COM\",\n CG: \"COG\",\n CD: \"COD\",\n DJ: \"DJI\",\n EG: \"EGY\",\n GQ: \"GNQ\",\n ER: \"ERI\",\n SZ: \"SWZ\",\n ET: \"ETH\",\n GA: \"GAB\",\n GM: \"GMB\",\n GH: \"GHA\",\n GN: \"GIN\",\n GW: \"GNB\",\n CI: \"CIV\",\n KE: \"KEN\",\n LS: \"LSO\",\n LR: \"LBR\",\n LY: \"LBY\",\n MG: \"MDG\",\n MW: \"MWI\",\n ML: \"MLI\",\n MR: \"MRT\",\n MU: \"MUS\",\n YT: \"MYT\",\n MA: \"MAR\",\n MZ: \"MOZ\",\n NA: \"NAM\",\n NE: \"NER\",\n NG: \"NGA\",\n RE: \"REU\",\n RW: \"RWA\",\n ST: \"STP\",\n SN: \"SEN\",\n SC: \"SYC\",\n SL: \"SLE\",\n SO: \"SOM\",\n ZA: \"ZAF\",\n SS: \"SSD\",\n SD: \"SDN\",\n TG: \"TGO\",\n TZ: \"TZA\",\n TN: \"TUN\",\n UG: \"UGA\",\n EH: \"ESH\",\n ZM: \"ZMB\",\n ZW: \"ZWE\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"## HTML legend function:\n- input is a single multipolygon or polygon feature\n- output is HTML div's","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"polygonSVGObservable = html`${polygonSVG}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"polygonSVG = `\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"## firstMultipolygonPropertiesOutput()\n- input: a feature collection\n- output: only the 0th entry of the features array. If it is undefined, return\n - `{ all22_sum: 0, all22_mean: 0, adu22_sum: 0, d400_sum: 0 }`\n - to make the legend still render well.","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"function firstMultipolygonPropertiesOutput(inputFeatureCollection) {\n /* The \"?.[]\" combined operator and \"?.\" operator allow you to not crash if these values are not found\n The ?? operator provides this value if there is an error in retrieving the other values. \n In this basic case, I returned 0 for each value we will display\n */\n const geoJSONproperties = inputFeatureCollection?.features?.[0]\n ?.properties ?? { all22_sum: 0, all22_mean: 0, adu22_sum: 0, d400_sum: 0 };\n return geoJSONproperties;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"## filterFeatureCollectionForFRIMapping: \n### Filter maps multipolygons for the ones that match an interesting 2 letter country code (ISO 3166-1 2 letter).\n\nNote that the legend expects a single country and not \"ALL\".\n\n- input:\n - interestedCountryCodeTwoLetter (ISO 3166-1 alpha-2) or \"ALL\"\n - geoJSONFeatureCollection\n- output: a feature collection with only multipolygons for country of interest","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"#### Below it is broken into individual step outputs so you can see:","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"filteredFeatures = map44GeoJSONContents.features.filter(\n (n) => n.properties[\"GID_0\"] === \"UGA\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"filteredFeatureCollection = Object.assign({}, map44GeoJSONContents, {\n features: filteredFeatures\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"outMultipolygon = firstMultipolygonPropertiesOutput(filteredFeatureCollection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":451,"value":"#### Just the legend function call:","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"$${wrapHTML(generateHTMLlegend(outMultipolygon))}","pinned":true,"hidden":false,"mode":"html"},{"id":454,"value":"### Just the filter feature collection call:","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"filterFeatureCollectionForFRIMapping(\"UG\", map44GeoJSONContents)","pinned":true,"hidden":false,"mode":"ojs"},{"id":456,"value":"### D3 format library loading. See alternative ways to include it into HTML at https://www.npmjs.com/package/d3-format","pinned":false,"hidden":false,"mode":"md"},{"id":399,"value":"d3Format = import(\"https://cdn.jsdelivr.net/npm/d3-format@3/+esm\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"### Leaflet & ObservableHQ","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(\n (L._style = html``)\n );\n // map_controller [1] = new L.GeoJSON(response.data['gjson']).addTo(map)\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"function wrapHTML(targetMultipolygons) {\n return html`${targetMultipolygons}`;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}