The avatar for @selenecodes
Selene Blok
⚡ Data scientist, I enjoy telling stories with data. I'm currently learning D3.js and working on hobby projects, Mapbox visualizations, and fiddling with Juniper network data.
Published
Mapbox
Edited
Nov 8, 2021
1 fork
1 star
Mapbox
Mapbox Draw color picker
The hitchhiker's guide to web feature services.
Dutch historic building viewer
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
await wfsRequest(selectedSource, "GetFeature", {
service: "WFS",
version: capabilities.version,
typeName: capabilities?.featureTypes?.[0],
outputFormat: "application/json"
// srsName: "EPSG:28992",
// bbox: `153112,472050,153942,472990`
})
Insert cell
await wfsRequest(selectedSource)
Insert cell
Insert cell
async function wfsRequest(
url,
operation = "GetCapabilities",
extraParameters = {}
) {
const queryParameters = new URLSearchParams({
request: operation,
service: "WFS",
...extraParameters
}).toString();

console.log(queryParameters);

const response = await fetch(`${url}?${queryParameters}`);
const responseFormat = response.headers.get("Content-Type");

// If the WFS server returns Content-Type header containing "json" it will read the data as json, otherwise as text.
const data = responseFormat.includes("json")
? await response.json()
: await response.text();

return {
data: data,
status: response.status
};
}
Insert cell
Insert cell
Insert cell
defaultSource = "https://geodata.nationaalgeoregister.nl/bag/wfs/v1_1"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more