3f:null 40:["$","title",null,{"children":"Dutch historic building viewer | Selene Blok | Observable"}] 46:T522,viewof mapContainer = { const featureIDs = new Set(); const geoJson = { type: "FeatureCollection", features: [] }; // const container = html`

`; const container = html`

`; yield container; const attribution = wfsConfig.name == "BAG" ? "PDOK.nl" : "© 3D BAG by tudelft3d"; const map = new mapboxgl.Map({ container, center: [5.38774, 52.155499], zoom: 7, style: "mapbox://styles/selenecodes/ckvgs50no1yw214pkrjm4dy05", attributionControl: false }).addControl( new mapboxgl.AttributionControl({ customAttribution: attribution }) ); map.addControl( new MapboxGeocoder({ accessToken: mapboxgl.accessToken, mapboxgl: mapboxgl }) ); map.on("load", () => { map.addSource("buildings", { attribution: attribution, type: "geojson", data: geoJson }); map.addLayer({ id: "buildings", type: "fill", source: "buildings", // reference the data source layout: {}, paint: { "fill-color": generateMapboxColorSwatch() } }); }); map.on("moveend", () => handleMapDrag(map, geoJson, featureIDs)); map.on("mousemove", (e) => handleMouseMove(e, container, featureIDs)); }47:[] 44:{"id":"3e50ab1a69d66c3b","slug":"dutch-historic-building-viewer","title":"Dutch historic building viewer","thumbnail":"662b1fe0c1bd504792547d1cd1154c1b27d24fa8d186812fed546c491662bb18","access_level":"public","create_time":"$D2021-10-26T13:43:01.031Z","update_time":"$D2022-03-17T21:15:27.542Z","view_time":null,"first_public_time":"$D2021-11-20T13:27:54.002Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3cdeccc1ad2f7c8e","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/100c4338f6c570d93da1037a8d94a51f2040e227a3480ee2b464abd22afaa553","tier":"starter_2024","bio":"⚡ 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.","following":false},"version":1676,"publish_version":1676,"role":null,"authored":false,"authors":[{"type":"individual","id":"7fe63d183a47404d","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/25a7c960cccc8fbc811dfa2c0c4a56f86a2f798f0c0ab2995624797232075f8f","tier":null,"bio":"⚡ 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.","following":false}],"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":true,"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":{"titling":"auto","title":"Dutch historic building viewer","cells":[{"id":0,"value":"# Dutch historic building viewer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1666,"value":"TEMP_TOKEN = \"pk.eyJ1Ijoic2VsZW5lY29kZXMiLCJhIjoiY2t2aDdteThhM3RwdTJxb2syZjZqbjd0dCJ9.BtnrFEPsWw_qShFqR8DY3w\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1476,"value":"viewof mapBoxApiKey = Inputs.text({\n label: \"Mapbox API Key\",\n value: TEMP_TOKEN\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"swatches(colorScale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"viewof color1 = Inputs.color({\n label: \"Color 1\",\n value: \"#120458\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"viewof color2 = Inputs.color({\n label: \"Color 2\",\n value: \"#ff124f\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1583,"value":"viewof wfsConfig = Inputs.select(\n [\n {\n name: \"3DBag\",\n url: \"https://data.3dbag.nl/api/BAG3D_v2/wfs\",\n params: {\n service: \"WFS\",\n version: \"2.0.0\",\n request: \"GetFeature\",\n typeName: \"bag3d_v2:lod22\",\n outputFormat: \"application/json\",\n srsName: \"EPSG:28992\"\n }\n },\n {\n name: \"BAG\",\n url: \"https://geodata.nationaalgeoregister.nl/bag/wfs/v1_1\",\n params: {\n service: \"WFS\",\n version: \"2.0.0\",\n request: \"GetFeature\",\n typeName: \"acme:pand\",\n outputFormat: \"application/json\",\n srsName: \"EPSG:28992\"\n }\n }\n ],\n {\n label: \"WFS Server\",\n format: (d) => d.name\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"html`\n

Lat: ${mapContainer.location.lat.toFixed(\n 4\n)}, Lng: ${mapContainer.location.lng.toFixed(4)}

Unique features: ${mapContainer.uniqueFeatureCount}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"md`## Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"height = 700","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"buildingAge = ({\n startYear: 1400,\n endYear: new Date().getFullYear()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"projection = ({\n name: \"EPSG:28992\",\n string:\n \"+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.417,50.3319,465.552,-0.398957,0.343988,-1.8774,4.0725 +units=m +no_defs\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1419,"value":"centuries = getCentury(buildingAge.endYear) -\n getCentury(buildingAge.startYear) +\n 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"colorScale = d3.quantize(d3.interpolateHcl(color1, color2), centuries + 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"md`### Data sources\n- PDOK\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"viewof searchQuery = Inputs.text({\n value: \"Stationshal 305\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"Inputs.table(await search(searchQuery))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"async function search(query) {\n const geoCoderURL =\n \"https://geodata.nationaalgeoregister.nl/locatieserver/v3/free\";\n const defaultParameters = {\n q: query\n };\n\n const parameters = new URLSearchParams(defaultParameters).toString();\n const URL = `${geoCoderURL}?${parameters}`;\n\n const response = await fetch(URL);\n const body = await response.json();\n const results = body.response.docs;\n return results.filter((el) => el.type == \"adres\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"// BAG = {\n// const rootUrl = \"https://geodata.nationaalgeoregister.nl/bag/wfs/v1_1\";\n // const defaultParameters = {\n // service: \"WFS\",\n // version: \"2.0.0\",\n // request: \"GetFeature\",\n // typeName: \"acme:pand\",\n // outputFormat: \"application/json\",\n // srsName: \"EPSG:28992\",\n // bbox: `153112,472050,153942,472990`\n // };\n\n// const parameters = L.Util.extend(defaultParameters);\n// const URL = rootUrl + L.Util.getParamString(parameters);\n\n// const response = await fetch(URL);\n// const body = await response.json();\n// yield body;\n// }\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1547,"value":"// threeDimensionalBAG = {\n// const rootUrl = \"https://data.3dbag.nl/api/BAG3D_v2/wfs\";\n// const defaultParameters = {\n// service: \"WFS\",\n// version: \"2.0.0\",\n// request: \"GetFeature\",\n// typeName: \"bag3d_v2:lod22\",\n// outputFormat: \"application/json\",\n// srsName: \"EPSG:4326\",\n// bbox: `153112,472050,153942,472990`\n// };\n\n// const parameters = new URLSearchParams(defaultParameters).toString();\n// const URL = `${rootUrl}?${parameters}`;\n\n// const response = await fetch(URL);\n// const body = await response.json();\n// yield body;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"md`## Helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"md`### GIS functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1622,"value":"async function handleMapDrag(map, geoJson, featureIDs) {\n const bounds = map.getBounds();\n const features = await featuresWithinBounds(bounds, wfsConfig);\n if (features) {\n geoJson.features.push(...existingFeatureFilter(features, featureIDs));\n }\n\n if (map.getSource(\"buildings\")) {\n map.getSource(\"buildings\").setData(geoJson);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"function existingFeatureFilter(features, featureIDs) {\n return features.filter((feature) => {\n const featureID = feature.properties.gid;\n const knownFeature = featureIDs.has(featureID);\n if (!knownFeature) {\n featureIDs.add(featureID);\n }\n\n // Only return new features\n return !knownFeature;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"async function wfsRequest(bounds) {\n const rootUrl = wfsConfig.url;\n const bbox =\n wfsConfig.name == \"BAG\"\n ? `${bounds.northEast.join(\",\")},${bounds.southWest.join(\",\")}`\n : `${bounds.southWest.join(\",\")},${bounds.northEast.join(\",\")}`;\n const defaultParameters = {\n ...wfsConfig.params,\n bbox: bbox\n };\n\n const parameters = new URLSearchParams(defaultParameters).toString();\n const URL = `${rootUrl}?${parameters}`;\n\n const response = await fetch(URL);\n const body = await response.json();\n return reproject.reproject(body, \"EPSG:28992\", \"EPSG:4326\", {\n \"EPSG:28992\": proj4.defs(\"EPSG:28992\"),\n \"EPSG:4326\": proj4.defs(\"EPSG:4326\")\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1633,"value":"function handleMouseMove(mouseMoveEvent, container, featureIDs) {\n container.value = {\n location: mouseMoveEvent.lngLat,\n uniqueFeatureCount: featureIDs.size\n };\n container.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"async function featuresWithinBounds(latLngBounds) {\n if (!latLngBounds) {\n return;\n }\n\n const bounds = projectBoundsToRD(latLngBounds);\n const geoJson = await wfsRequest(bounds);\n return geoJson.features;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"function projectBoundsToRD(bounds) {\n const northEast = bounds.getNorthEast();\n const southWest = bounds.getSouthWest();\n\n return {\n northEast: proj4(\"EPSG:28992\", [northEast.lng, northEast.lat]),\n southWest: proj4(\"EPSG:28992\", [southWest.lng, southWest.lat])\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1407,"value":"function generateMapboxColorSwatch() {\n const bins = new Array(centuries)\n .fill(0)\n .slice(1)\n .map((_, i) => (getCentury(buildingAge.startYear) + i) * 100);\n bins.unshift(0);\n const mapboxExpression = [\n \"interpolate\",\n [\"linear\"],\n [\"get\", wfsConfig.name == \"BAG\" ? \"bouwjaar\" : \"oorspronkelijk_bouwjaar\"]\n ];\n bins.forEach((bin, i) => mapboxExpression.push(bin, colorScale[i]));\n\n return mapboxExpression;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"md`### Extra functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"function getCentury(year) {\n return Math.ceil(year / 100);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"function getRangePercentage(value, min, max) {\n return (value - min) / (max - min);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"function swatches(colors) {\n return html`${colors.map(\n (c) => `

`\n )}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl\");\n if (!gl.accessToken) {\n gl.accessToken = mapBoxApiKey;\n const href = await require.resolve(\"mapbox-gl/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"MapboxGeocoder = {\n const geocoder = require(\"https://bundle.run/@mapbox/mapbox-gl-geocoder@4.7.4\");\n const href = await require.resolve(\n \"@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css\"\n );\n document.head.appendChild(html``);\n return geocoder;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"reproject = require(\"https://bundle.run/reproject@1.2.6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"proj4 = require(\"https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"{\n try {\n proj4.defs(projection.name, projection.string);\n new CustomEvent(\"input\", { bubbles: true });\n return md`✅ Successfully loaded ${projection.name} projection into proj4.`;\n } catch (err) {\n return md`❌ Error loading projection into proj4: ${err}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"