31:T43d,The [World Database of Key Biodiversity Areas](https://wdkba.keybiodiversityareas.org/) is managed by [BirdLife International](https://www.birdlife.org/?gad_source=1&gclid=CjwKCAjw_Na1BhAlEiwAM-dm7KWRcYTD7g6NyuMKjliQLOCOBX18cuRseeMqS4x9gHeN-unck_h9yxoC4B0QAvD_BwE) on behalf of the [KBA Partnership](https://www.keybiodiversityareas.org/working-with-kbas/programme/partnership).^{[[*]](https://www.keybiodiversityareas.org/kba-news/wdkba)} It hosts data on global and regional [Key Biodiversity Areas](https://www.keybiodiversityareas.org/) (KBAs), including Important Bird and Biodiversity Areas identified by the [BirdLife International Partnership](https://www.birdlife.org/partnership/), [Alliance for Zero Extinction](https://zeroextinction.org/) sites, KBAs identified through hotspot ecosystem profiles supported by the [Critical Ecosystem Partnership Fund](https://www.cepf.net/), and a small number of other KBAs. The database was developed from the [World Bird and Biodiversity Database (WBDB)](https://www.globalconservation.info/) managed by BirdLife International.32:T6e9,kba_2022_10_POL_view = (mapRef, kba_2022_10_POL) => { mapRef.addSource("kba_2022_10_POL", { type: "geojson", data: kba_2022_10_POL }); mapRef.addLayer({ id: "kba_2022_10_POL_fill", type: "fill", source: "kba_2022_10_POL", layout: { visibility: "visible" }, paint: { "fill-color": "yellow", "fill-opacity": 0.05 } }); mapRef.addLayer({ id: "kba_2022_10_POL_line", type: "line", source: "kba_2022_10_POL", layout: { visibility: "visible" }, paint: { "line-color": "yellow", "line-width": 0.01, "line-opacity": 0.3 } }); // Add popup functionality mapRef.on('click', 'kba_2022_10_POL_fill', function (e) { const feature = e.features[0]; const properties = feature.properties; // Create the popup content const popupContent = `

${properties['IntName']}
Site ID: ${properties['SitRecID']}
Triggers: ${properties['triggers']}
Country: ${properties['Country']}
Region: ${properties['Region']}

`; // Create a new popup and set its coordinates and content new maplibregl.Popup() .setLngLat(e.lngLat) .setHTML(popupContent) .addTo(mapRef); }); // Change the cursor to a pointer when the mouse is over the polygon layer mapRef.on('mouseenter', 'kba_2022_10_POL_fill', function () { mapRef.getCanvas().style.cursor = 'pointer'; }); // Change the cursor back to default when the mouse leaves the polygon layer mapRef.on('mouseleave', 'kba_2022_10_POL_fill', function () { mapRef.getCanvas().style.cursor = ''; }); };33:[{"id":"9798980b725615743c1be04d25c6a67fa8965fefa780b716685e1bf33aa8613ada1f66dc85fa1706428b1d999010882c55b91f817f1f13131db9236aab3da866","href":"https://static.observableusercontent.com/files/9798980b725615743c1be04d25c6a67fa8965fefa780b716685e1bf33aa8613ada1f66dc85fa1706428b1d999010882c55b91f817f1f13131db9236aab3da866","name":"kba-2022-10-poly-simp.geojson","type":"application/geo+json","lastModified":1723299017855.417,"size":40730086}] 2f:{"title":"Key Biodiversity Areas","cells":[{"id":0,"value":"# Key Biodiversity Areas","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof image_selection = Inputs.radio([\"CartoDB Voyager\", \"NASA Blue Marble\", \"ESRI World Imagery\", \"ESRI World Terrain Base\", \"ESRI Topographic\", \"USGS Topographic\"], {\n label: \"Select Basemap\",\n value: \"CartoDB Voyager\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof tableOfContents = Inputs.checkbox(toc, {\n label: \"Toggle Visibility\",\n value: toc.values()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":621,"value":"### Explore Visible Features","pinned":false,"hidden":false,"mode":"md"},{"id":623,"value":"_The table below automatically adjusts to the map's viewing area._","pinned":false,"hidden":false,"mode":"md"},{"id":325,"value":"Inputs.table(visibleFeatures.features.map(d => d.properties))","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":626,"value":"### KBA Data Layers","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"kba_wms_view = (mapRef) => {\n mapRef.addSource('kba-wms', {\n 'type': 'raster',\n 'tiles': [\n proxyUrl + 'https://birdlaa8.birdlife.org/geoserver/gwc/service/wms?service=WMS&request=GetMap&layers=birdlife_dz:ibas_global_2024_wm&styles=&format=image/png&transparent=true&version=1.1.1&height=256&width=256&srs=EPSG:3857&bbox={bbox-epsg-3857}'\n ],\n 'tileSize': 256\n });\n\n mapRef.addLayer({\n 'id': 'kba-wms',\n 'type': 'raster',\n 'source': 'kba-wms',\n 'paint': { 'raster-opacity': 1 }\n });\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"// archival and unofficial copy of \"https://birdlaa8.birdlife.org/geoserver/wfs?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=birdlife_dz:ibas_pol_20240515_wm_selected&OUTPUTFORMAT=application/json\"\n\nkba_2022_10_POL = await FileAttachment(\"kba-2022-10-poly-simp.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":628,"value":"### Basemap Style Definitions","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"nat_geo = (mapRef) => {\n mapRef.addSource(\"nat_geo\", {\n type: \"raster\",\n tiles: [\n \"https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}\"\n ],\n minzoom: 0,\n maxzoom: 16\n });\n mapRef.addLayer({\n id: \"nat_geo\",\n type: \"raster\",\n source: \"nat_geo\",\n layout: {\n visibility: \"none\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"nat_geo_visibility = (() => {\n // Check if the map style is loaded\n if (map.isStyleLoaded()) {\n // If loaded, set the visibility\n map.setLayoutProperty(\n \"nat_geo\",\n \"visibility\",\n (image_selection.includes(\"NatGeo World Map\")) ? \"visible\" : \"none\"\n );\n } else {\n // If not loaded, wait for the 'load' event\n map.on('load', () => {\n map.setLayoutProperty(\n \"nat_geo\",\n \"visibility\",\n (image_selection.includes(\"NatGeo World Map\")) ? \"visible\" : \"none\"\n );\n });\n }\n return `nat_geo_visibility`;\n})();","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"usgs_topo = (mapRef) => {\n mapRef.addSource(\"usgs_topo\", {\n type: \"raster\",\n tiles: [\n \"https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}\"\n ],\n minzoom: 0,\n maxzoom: 16\n });\n mapRef.addLayer({\n id: \"usgs_topo\",\n type: \"raster\",\n source: \"usgs_topo\",\n layout: {\n visibility: \"none\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"usgs_topo_visibility = (() => {\n // Check if the map style is loaded\n if (map.isStyleLoaded()) {\n // If loaded, set the visibility\n map.setLayoutProperty(\n \"usgs_topo\",\n \"visibility\",\n (image_selection.includes(\"USGS Topographic\")) ? \"visible\" : \"none\"\n );\n } else {\n // If not loaded, wait for the 'load' event\n map.on('load', () => {\n map.setLayoutProperty(\n \"usgs_topo\",\n \"visibility\",\n (image_selection.includes(\"USGS Topographic\")) ? \"visible\" : \"none\"\n );\n });\n }\n return `usgs_topo_visibility`;\n})();","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"world_imagery = (mapRef) => {\n mapRef.addSource(\"world_imagery\", {\n type: \"raster\",\n tiles: [\n \"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}\"\n ],\n minzoom: 0,\n maxzoom: 16\n });\n mapRef.addLayer({\n id: \"world_imagery\",\n type: \"raster\",\n source: \"world_imagery\",\n layout: {\n visibility: \"none\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"world_imagery_visibility = (() => {\n // Check if the map style is loaded\n if (map.isStyleLoaded()) {\n // If loaded, set the visibility\n map.setLayoutProperty(\n \"world_imagery\",\n \"visibility\",\n (image_selection.includes(\"World Imagery\")) ? \"visible\" : \"none\"\n );\n } else {\n // If not loaded, wait for the 'load' event\n map.on('load', () => {\n map.setLayoutProperty(\n \"world_imagery\",\n \"visibility\",\n (image_selection.includes(\"World Imagery\")) ? \"visible\" : \"none\"\n );\n });\n }\n return `world_imagery_visibility`;\n})();","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"terrain = (mapRef) => {\n mapRef.addSource(\"terrain\", {\n type: \"raster\",\n tiles: [\n \"https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}\"\n ],\n minzoom: 0,\n maxzoom: 16\n });\n mapRef.addLayer({\n id: \"terrain\",\n type: \"raster\",\n source: \"terrain\",\n layout: {\n visibility: \"none\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"terrain_visibility = (() => {\n // Check if the map style is loaded\n if (map.isStyleLoaded()) {\n // If loaded, set the visibility\n map.setLayoutProperty(\n \"terrain\",\n \"visibility\",\n (image_selection.includes(\"World Terrain Base\")) ? \"visible\" : \"none\"\n );\n } else {\n // If not loaded, wait for the 'load' event\n map.on('load', () => {\n map.setLayoutProperty(\n \"terrain\",\n \"visibility\",\n (image_selection.includes(\"World Terrain Base\")) ? \"visible\" : \"none\"\n );\n });\n }\n return `terrain_visibility`;\n})();","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"topo = (mapRef) => {\n mapRef.addSource(\"topo\", {\n type: \"raster\",\n tiles: [\n \"https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}\"\n ],\n minzoom: 0,\n maxzoom: 16\n });\n mapRef.addLayer({\n id: \"topo\",\n type: \"raster\",\n source: \"topo\",\n layout: {\n visibility: \"none\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"topo_visibility = (() => {\n // Check if the map style is loaded\n if (map.isStyleLoaded()) {\n // If loaded, set the visibility\n map.setLayoutProperty(\n \"topo\",\n \"visibility\",\n (image_selection.includes(\"ESRI Topographic\")) ? \"visible\" : \"none\"\n );\n } else {\n // If not loaded, wait for the 'load' event\n map.on('load', () => {\n map.setLayoutProperty(\n \"topo\",\n \"visibility\",\n (image_selection.includes(\"ESRI Topographic\")) ? \"visible\" : \"none\"\n );\n });\n }\n return `topo_visibility`;\n})();","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"blue_marble = (mapRef) => {\n mapRef.addSource(\"blue_marble\", {\n type: \"raster\",\n tiles: [\n \"https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/BlueMarble_NextGeneration/default/GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpeg\"\n ],\n tileSize: 256,\n minzoom: 0,\n maxzoom: 16\n });\n mapRef.addLayer({\n id: \"blue_marble\",\n type: \"raster\",\n source: \"blue_marble\",\n layout: {\n visibility: \"none\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"blue_marble_visibility = (() => {\n // Check if the map style is loaded\n if (map.isStyleLoaded()) {\n // If loaded, set the visibility\n map.setLayoutProperty(\n \"blue_marble\",\n \"visibility\",\n (image_selection.includes(\"NASA Blue Marble\")) ? \"visible\" : \"none\"\n );\n } else {\n // If not loaded, wait for the 'load' event\n map.on('load', () => {\n map.setLayoutProperty(\n \"blue_marble\",\n \"visibility\",\n (image_selection.includes(\"NASA Blue Marble\")) ? \"visible\" : \"none\"\n );\n });\n }\n return `blue_marble_visibility`;\n})();","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":634,"value":"### Controls","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"toc = new Map([\n [\n \"Show / Hide KBA Layer\",\n {\n label: \"kba_2022_10_POL\",\n layers: [\"kba_2022_10_POL_fill\", \"kba_2022_10_POL_line\", \"kba-wms\"]\n }\n ],\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"layer_visibility = (() => {\n for (const entry of toc.values()) {\n for (const layer of entry.layers) {\n if (map.getLayer(layer)) {\n map.setLayoutProperty(\n layer,\n \"visibility\",\n tableOfContents.map((d) => d.label).includes(entry.label)\n ? \"visible\"\n : \"none\"\n );\n }\n }\n }\n return tableOfContents;\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"{\n map.on('moveend', () => {\n const bounds = map.getBounds();\n mutable bounding_box_view = {\n north: bounds.getNorth(),\n south: bounds.getSouth(),\n east: bounds.getEast(),\n west: bounds.getWest()\n };\n });\n return 'moveable bounding box'\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"mutable bounding_box_view = ([])","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"function getVisibleFeatures(geojson, boundingBox) {\n if (!geojson || !geojson.features || !boundingBox) {\n throw new Error('Invalid arguments');\n }\n\n // Create a turf bounding box polygon\n const bboxPolygon = turf.bboxPolygon([\n boundingBox.west,\n boundingBox.south,\n boundingBox.east,\n boundingBox.north\n ]);\n\n // Filter features based on whether they intersect with the bounding box polygon\n const visibleFeatures = geojson.features.filter(feature => {\n // Check if the feature intersects with the bounding box polygon\n return turf.booleanIntersects(bboxPolygon, feature);\n });\n\n // Return the filtered GeoJSON object\n return {\n type: 'FeatureCollection',\n features: visibleFeatures\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"visibleFeatures = getVisibleFeatures(kba_2022_10_POL, bounding_box_view);","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":665,"value":"### Map","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"map = (() => {\n // Create the \"map\" object with the maplibregl.Map constructor, referencing the container div\n\n const mapRef = (container.value = new maplibregl.Map({\n container: container,\n center: [172.5,-43],\n zoom: 4,\n pitch: 0,\n bearing: 0,\n maplibreglLogo: false,\n style: \"https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json\",\n attributionControl: false\n }));\n\n // Add some navigation controls.\n mapRef.addControl(new maplibregl.NavigationControl(), \"top-right\");\n\n // If this cell is invalidated, dispose of the map.\n invalidation.then(() => mapRef.remove());\n\n // The map must be loaded before we can add sources.\n new Promise((resolve, reject) => {\n mapRef.on(\"load\", async () => {\n\n nat_geo(mapRef);\n world_imagery(mapRef);\n terrain(mapRef);\n blue_marble(mapRef);\n topo(mapRef);\n usgs_topo(mapRef);\n\n kba_wms_view(mapRef);\n kba_2022_10_POL_view(mapRef, kba_2022_10_POL);\n\n });\n });\n\n return mapRef;\n\n})();\n\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":667,"value":"### Libraries & Helper","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"proxyUrl = 'https://corsproxy.io/?';","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"turf = require(\"@turf/turf@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"shapefile = require(\"https://unpkg.com/shapefile@0.6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"maplibregl = {\n const gl = await require(\"maplibre-gl@2.4.0\");\n const href = await require.resolve(\"maplibre-gl@2.4.0/dist/maplibre-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}