31:T599,map_narrow = { let container = yield html`

`; let map = new mapboxgl.Map({ container: container, center: [18, -12], zoom: 5, pitch: 0, bearing: 0, style: "mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y", scrollZoom: true }); map.addControl(new mapboxgl.NavigationControl(), "top-right"); const toProxyURL = (url) => `https://corsproxy.io?${encodeURIComponent(url)}`; let wmsURL = `http://riskprofilesundrr.org/geoserver/wms?${new URLSearchParams( { service: "WMS", version: "2.0", request: "GetMap", layers: select, bbox: "BBOX_PLACEHOLDER", srs: "EPSG:3857", styles: "", format: "image/png", tiled: "true", transparent: "true", width: 256, height: 256 } )}`; wmsURL = toProxyURL(wmsURL).replace("BBOX_PLACEHOLDER", "{bbox-epsg-3857}"); map.on("load", function () { map.addLayer({ id: "basemap", type: "raster", source: { type: "raster", tiles: [wmsURL], tileSize: 256 }, paint: { "raster-fade-duration": 0, "raster-opacity": 0.8 } }); var layers = map.getStyle().layers; // Find the index of the first symbol layer in the map style var firstSymbolId; for (var i = 0; i < layers.length; i++) { if (layers[i].type === "symbol") { firstSymbolId = layers[i].id; break; } } }); invalidation.then(() => map.remove()); }32:T6ef,function extractSalientDataFromXML(xml) { const parser = new DOMParser(); const xmlDoc = parser.parseFromString(xml, "text/xml"); const layerElements = xmlDoc.querySelectorAll("Layer"); const layers = Array.from(layerElements).map(layerElement => { const name = layerElement.querySelector("Name").textContent; const title = layerElement.querySelector("Title").textContent; const abstract = layerElement.querySelector("Abstract").textContent; const keywordList = Array.from(layerElement.querySelectorAll("KeywordList > Keyword")).map(keyword => keyword.textContent); const crsList = Array.from(layerElement.querySelectorAll("CRS")).map(crs => crs.textContent); const boundingBoxes = Array.from(layerElement.querySelectorAll("BoundingBox")).map(boundingBox => ({ crs: boundingBox.getAttribute("CRS"), minx: boundingBox.getAttribute("minx"), miny: boundingBox.getAttribute("miny"), maxx: boundingBox.getAttribute("maxx"), maxy: boundingBox.getAttribute("maxy") })); const styleElement = layerElement.querySelector("Style"); const legendURL = styleElement.querySelector("LegendURL > OnlineResource").getAttribute("xlink:href"); const format = styleElement.querySelector("Format").textContent; const onlineResource = styleElement.querySelector("OnlineResource").getAttribute("xlink:href"); const isQueryable = layerElement.getAttribute("queryable"); const isOpaque = layerElement.getAttribute("opaque"); return { name, title, abstract, keywords: keywordList, crs: crsList, boundingBoxes, legendURL, format, onlineResource, queryable: isQueryable === "1", opaque: isOpaque === "1" }; }); return layers; }33:[] 2f:{"title":"Angola Exploration | UNDRR Geospatial Data","cells":[{"id":0,"value":"# Angola Exploration | UNDRR Geospatial Data","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"The United Nations Office for Disaster Risk Reduction (UNDRR) helps decision makers across the globe better understand and act on risk. ","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"In an effort to help building disaster resilience to natural hazards in Sub-Saharan Africa regions under the [EU-ACP Programme “*Building Disaster Resilience to Natural Hazards in Sub-Saharan African Regions, Countries and Communities*”](https://www.preventionweb.net/resilient-africa/programme), countries and communities, UNDRR and partners developed a **[data catalog](http://riskprofilesundrr.org/riskprofiles/)** containing a series of geographic layers which can be freely accessed and downloaded.","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"This notebook offers a quick layer preview, focusing on Angola.","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"viewof select = Inputs.select(output_results.slice(3).filter(d => d.name.includes(\"ago\") || d.name.includes(\"ao\") || d.name.includes(\"angola\")).map(d => d.name), {value: \"geonode:angola_hazard_spei1_historic_v3\", label: \"Select Layer\", width: width*0.4})","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"**File Name:** ${output_layers.filter(obj => obj.name === select)[0].name}
\n**Title:** ${output_layers.filter(obj => obj.name === select)[0].title}
\n**Abstract:** ${output_layers.filter(obj => obj.name === select)[0].abstract}
\n**Legend:**

obj.name === select)[0].onlineResource)}>","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"The UNDRR [Risk Profiles Data Catalog](http://riskprofilesundrr.org/geoserver/wms?request=GetCapabilities&access_token=e0aba74f0ad811ee94f802f25c5c7296) is hosted using GeoNode. We can query the server to get information about its capabilities and the data it contains. Because the server is using `https` and modern web browsers require more secure web traffic, in order to load it we'll need to set up a CORS proxy. ","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"toProxyURL = (url) => `https://corsproxy.io?${encodeURIComponent(url)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"geoserver = toProxyURL('http://riskprofilesundrr.org/geoserver/wms?request=GetCapabilities&access_token=e0aba74f0ad811ee94f802f25c5c7296')","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"xml = await fetch(geoserver).then(r => r.text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"The XML is very large, and in order to make use of it as data, it helps to parse the contents and transform them into JavaScript. The function below does just that.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"output_layers","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"output_layers = output_results.slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"output_results = extractSalientDataFromXML(xml)","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoidmluY2VudHNhcmFnbyIsImEiOiJjamxwa3JkaWkwZ3BjM3dudmZmazQwYjI2In0.eUzks_hqH-QVIlnXUKmKsA\";\n const href = await require.resolve(\"mapbox-gl/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}