2d:null 2e:["$","title",null,{"children":"All Buildings in the Netherlands | Bert Spaan | Observable"}] 33:T435,md`# All Buildings in the Netherlands A few years ago, [I made a map](http://code.waag.org/buildings/) which showed all 9,866,539 buildings in the Netherlands, colored by their year of construction. People [really](https://www.citylab.com/equity/2013/10/delightfully-trippy-map-every-single-building-netherlands/7127/) [liked](https://www.theverge.com/2013/9/2/4683912/interactive-map-plots-out-nearly-10-million-netherlands-buildings-by) this map! In the meantime, many more new buildings were constructed, the data has become available via [a WFS server](https://www.pdok.nl/geo-services?articleid=1948911), and [Observable was released](https://beta.observablehq.com/@mbostock/why-observable). Move the [map below](#area), select which part of Holland you want to see, and save the visualization as PNG or SVG. _Note: the more you zoom out, the more buildings the visualization will likely contain. This can mean downloading tens of thousands of polygons from the server, and will slow down your computer. Be careful when zooming out! Please be kind to the WFS server!_ `34:[] 31:{"id":"84d43e980075cc64","slug":"all-buildings-in-the-netherlands","title":"All Buildings in the Netherlands","thumbnail":"3eacb44229b56e6b5c0dc70bc54f2b329a33a5ccf9701465cb5d579c83810f78","access_level":"public","create_time":"$D2018-08-22T12:33:28.446Z","update_time":"$D2020-09-23T06:04:00.895Z","view_time":null,"first_public_time":"$D2018-08-29T15:15:24.213Z","has_unpublished_edits":null,"fork":false,"stars":18,"starred":false,"owner":{"type":"team","id":"569e0b420e4a1957","login":"bertspaan","name":"Bert Spaan","avatar_url":"https://avatars-next.observableusercontent.com/30e87702a8b688510b4d1c30f411d16532c7d46a100044235468810a711ae98d","tier":"starter_2024"},"version":456,"publish_version":456,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf3b6e1e3dc67c1f","login":"bertspaan","name":"Bert Spaan","avatar_url":"https://avatars-next.observableusercontent.com/30e87702a8b688510b4d1c30f411d16532c7d46a100044235468810a711ae98d","tier":null}],"members":[{"type":"individual","id":"bf3b6e1e3dc67c1f","login":"bertspaan","name":"Bert Spaan","avatar_url":"https://avatars-next.observableusercontent.com/30e87702a8b688510b4d1c30f411d16532c7d46a100044235468810a711ae98d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"All Buildings in the Netherlands","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"buildings = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"html`Download the map as a ${DOM.download(await rasterize(buildings), 'buildings', 'PNG file')} or as an ${DOM.download(serialize(buildings), 'buildings', 'SVG file')}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"md`Move the map below to select an area (building data will only load if you are zoomed in):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"area = display(viewof bounds)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"md`## Legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"html`\n

\n ${bands.map((band, i) => html`\n

\n \n \n \n ${printBand(i)}\n \n

\n `)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"md`## Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"bands = [\n [1800, '#A50026'],\n [1850, '#D73027'],\n [1900, '#F46D43'],\n [1930, '#FDAE61'],\n [1945, '#FEE090'],\n [1960, '#FFFFBF'],\n [1975, '#E0F3F8'],\n [1985, '#ABD9E9'],\n [1995, '#74ADD1'],\n [2005, '#4575B4'],\n [Infinity, '#313695']\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"maxBuildings = 25000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"geojson = {\n let first = true\n let done = false\n\n let stillResults = true\n let requestsDone = 0\n \n const count = 1000\n \n let results = {\n type: 'FeatureCollection',\n features: []\n }\n\n const createUrl = (startIndex) => `https://geodata.nationaalgeoregister.nl/bag/wfs/v1_1?service=wfs&version=2.0.0&request=GetFeature&typeName=bag:pand&outputFormat=json&srsName=urn:ogc:def:crs:EPSG:4326&count=${count}&startIndex=${startIndex}&bbox=${bounds.toBBoxString()},urn:ogc:def:crs:OGC:1.3:CRS84`\n\n while (stillResults && results.features.length < maxBuildings) {\n const geojson = await fetchGeojson(createUrl(requestsDone * count))\n \n if (geojson && geojson.features.length) {\n results = {\n type: 'FeatureCollection',\n features: [...results.features, ...geojson.features]\n } \n } else {\n stillResults = false\n } \n \n yield results\n requestsDone += 1\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"boundsGeoJSON = L.polygon([\n bounds.getSouthWest(),\n bounds.getSouthEast(),\n bounds.getNorthEast(),\n bounds.getNorthWest()\n]).toGeoJSON()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"color = (year) => {\n let i = 0\n while (true) {\n if (between(getBandYears(i), year)) {\n return bands[i][1]\n }\n \n i += 1\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"printBand = (i) => {\n if (i === 0) {\n return `≤\t${bands[0][0]}`\n } else if (i === bands.length - 1) {\n return `≥\t${bands[bands.length - 2][0]}`\n } else {\n return `${bands[i - 1][0]}–${bands[i][0]}`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"getBandYears = (i) => [i - 1 >= 0 ? bands[i - 1][0] : -Infinity, bands[i][0]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"fetchGeojson = (url) => fetch(url, {\n mode: 'cors'\n}).then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"viewof bounds = new View(\n L.latLngBounds(L.latLng(52.1525194, 5.3794324), L.latLng(52.1604181, 5.4001176))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"function* display (bounds) { \n let container = DOM.element('div', {\n style: `width:${width}px; height:${height}px` \n })\n \n yield container\n \n let map = L.map(container, {\n minZoom: 9,\n maxZoom: 18\n }).setView(bounds.value.getCenter(), 17)\n let osmLayer = L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap contributors'\n }).addTo(map)\n \n map.on('moveend', () => {\n if (map.getZoom() >= 14) {\n bounds.value = map.getBounds()\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"between = (range, n) => n >= range[0] && n < range[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"path = d3.geoPath()\n .projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"projection = d3.geoMercator()\n .center([bounds.getCenter().lat, bounds.getCenter().lng])\n .fitSize([width, height], boundsGeoJSON)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"import { View } from '@mbostock/synchronized-views'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"