29:null 2a:["$","title",null,{"children":"The hitchhiker's guide to web feature services. | Selene Blok | Observable"}] 2f:T8ec,html``30:T5bd,## What is a Web Feature Service? A WFS service is a service that provides features (buildings, shapes etc) through a HTTP request. **Sources:** - [Wikipedia - Web Feature Service](https://en.wikipedia.org/wiki/Web_Feature_Service) - [GeoServer docs](https://docs.geoserver.org/latest/en/user/services/wfs/reference.html) ## Where can I find WFS sources? A lot of map providers offer feature services. A few examples are: - Dutch building registration (BAG) https://geodata.nationaalgeoregister.nl/bag/wfs/v1_1 - Dutch building registration 3D (3DBAG) https://data.3dbag.nl/api/BAG3D_v2/wfs You can also read these articles/websites which provide a few search engines for WFS services - [OGC - Finding OGC WMS, WFS, WCS services](https://www.ogc.org/blog/2034) - [Digital Geography - A not complete list of WFS/WMS Catalogs](https://digital-geography.com/list-wfs-catalogs/) - [Dutch national georegister](https://nationaalgeoregister.nl/geonetwork/srv/dut/catalog.search#/home) ## How do I retrieve data from a WFS? All WFS providers offer a `GetCapabilities` endpoint which can be called to notify you of the capabilities of the requested service. This can include what projections it can serve, which response formats it can send back (geoJSON, xml, etc) and much more. --- # An example Feel free to input a WFS url in the field below. Please note that due to ObservableHQ security measures only https WFS services are supported.31:[] 2d:{"id":"fe97f93ea3fbf9ce","slug":"web-feature-service-guide","title":"The hitchhiker's guide to web feature services.","thumbnail":"4b69873ac2b4f86d066b2a403d69f955edc3a9b1570c301e3aac1ad1235e2c68","access_level":"public","create_time":"$D2021-11-02T16:40:02.998Z","update_time":"$D2022-10-05T10:00:22.000Z","view_time":null,"first_public_time":"$D2021-11-02T19:55:24.607Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"3cdeccc1ad2f7c8e","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/100c4338f6c570d93da1037a8d94a51f2040e227a3480ee2b464abd22afaa553","tier":"starter_2024"},"version":539,"publish_version":539,"role":null,"authored":false,"authors":[{"type":"individual","id":"7fe63d183a47404d","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/25a7c960cccc8fbc811dfa2c0c4a56f86a2f798f0c0ab2995624797232075f8f","tier":null}],"members":[{"type":"individual","id":"7fe63d183a47404d","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/25a7c960cccc8fbc811dfa2c0c4a56f86a2f798f0c0ab2995624797232075f8f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"0b7700f193201a0f","slug":"advanced-mapbox","title":"Mapbox","owner":{"id":"3cdeccc1ad2f7c8e","login":"selenecodes","name":"Selene Blok"}},"type":"notebook","body":{"title":"The hitchhiker's guide to web feature services.","cells":[{"id":488,"value":"# The hitchhiker's guide to web feature services.\n## Fantastic features and where to find them","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"viewof selectedSource = Inputs.text({\n label: \"WFS url:\",\n value: defaultSource,\n width: \"100%\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"## Capabilities\nFirst we need to get the capabilities of the service which we can do with the following HTTP call which will yield us with a lot of XML.\nPlease note that the first parameter should always be the `request` because some WFS servers only read the first parameter for getCapabilities.\n```js\nconst defaultParameters = {\n request: \"GetCapabilities\",\n service: \"WFS\"\n};\nconst parameters = new URLSearchParams(defaultParameters).toString();\nconst response = await fetch(`${selectedSource}?\\${parameters}`);\n```\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"capabilities = {\n const wfsResponse = await wfsRequest(selectedSource);\n const data = wfsResponse.data;\n\n if (wfsResponse.status != 200) {\n return {};\n }\n\n const _capabilities = (\n await xml2js.parseStringPromise(data, {\n trim: true\n })\n )[\"wfs:WFS_Capabilities\"];\n\n return {\n operations: _capabilities[\"ows:OperationsMetadata\"][0][\"ows:Operation\"].map(\n (feature) => feature.$.name\n ),\n featureTypes: _capabilities.FeatureTypeList[0].FeatureType.map(\n (feature) => feature.Name[0]\n ),\n version: _capabilities.$.version,\n raw: _capabilities\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"## `GetCapabilities` Debugger\n${objIsEmpty(capabilities) ? \n `❌ Error loading WFS data. Have you checked that your URL is correct?` :\n generateWFSMarkup(capabilities)\n}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"# Retrieving features\nWe can retrieve features using the `GetFeature` operation.\nIn most cases WFS servers support outputing geoJSON instead of XML if you provide the `outputFormat=application/json` query parameter.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"await wfsRequest(selectedSource, \"GetFeature\", {\n service: \"WFS\",\n version: capabilities.version,\n typeName: capabilities?.featureTypes?.[0],\n outputFormat: \"application/json\"\n // srsName: \"EPSG:28992\",\n // bbox: `153112,472050,153942,472990`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"await wfsRequest(selectedSource)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`## Functions used to retrieve WFS data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"async function wfsRequest(\n url,\n operation = \"GetCapabilities\",\n extraParameters = {}\n) {\n const queryParameters = new URLSearchParams({\n request: operation,\n service: \"WFS\",\n ...extraParameters\n }).toString();\n\n console.log(queryParameters);\n\n const response = await fetch(`${url}?${queryParameters}`);\n const responseFormat = response.headers.get(\"Content-Type\");\n\n // If the WFS server returns Content-Type header containing \"json\" it will read the data as json, otherwise as text.\n const data = responseFormat.includes(\"json\")\n ? await response.json()\n : await response.text();\n\n return {\n data: data,\n status: response.status\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"md`## Appendix\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`### Config`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"defaultSource = \"https://geodata.nationaalgeoregister.nl/bag/wfs/v1_1\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"md`### Imports & helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"function generateWFSMarkup(data) {\n return md`The names of the operations are:\n${createMarkupList(data.operations)}\n\nThe names of the feature types are:\n${createMarkupList(data.featureTypes)}\n\n### Important WFS info:\n\n| | |\n|-|-|\n| version | ${data.version || \"Unknown\"} |\n| fees | ${\n data?.raw?.[\"ows:ServiceIdentification\"][0][\"ows:Fees\"][0] || \"Unknown\"\n } |`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"function createMarkupList(arr = []) {\n return html`

${el}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"function objIsEmpty(obj) {\n return (\n obj && // 👈 null and undefined check\n Object.keys(obj).length === 0 &&\n Object.getPrototypeOf(obj) === Object.prototype\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"xml2js = require(\"https://bundle.run/xml2js@0.4.23\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"