}

De hoogste gebouwen van Nederland

De applicatie Gebouwhoogte van Nederland hebben we eerder deze maand een update gegeven. We hebben een scroll verhaal over de hoogste gebouwen van Nederland toegevoegd. Aan de hand van een aantal voorbeelden zoals de Maastoren en Delftse Poort in Rotterdam krijg je niet alleen informatie over de hoogste gebouwen, maar gaan we ook in op de geografische informatie achter deze applicatie.

Voor verschillende steden in de wereld zijn eerder interactieve kaartapplicaties gemaakt, die de hoogte van gebouwen laten zien:

In 2015 publiceerde het Kadaster de eerste versie van 3D Gebouwhoogte NL. Alle 2.992.613 gebouwen in Top10NL hebben een hoogte gekregen op basis van het Actueel Hoogtebestand Nederland (AHN2). Er zijn niet veel toepassingen van deze dataset, die voor het grote publiek toegankelijk zijn.

Uitdaging

Hoe laat je in een interactieve, online kaartapplicatie een GML-bestand van 3,3 GB met daarin 2.992.613 gebouwblokken van heel Nederland in 3D zien?

Het eindresultaat

Aanpak

Gebruikten we voor Valkenburg in 3D (2014) een enkel GeoJSON-bestand en OSM Buildings met Leaflet, nu kiezen we voor Mapbox Vector Tiles (MVT) om heel Nederland met Mapbox GL JS in de browser te tekenen. Met vector tiles kan je veel objecten op de kaart te zetten en eigenschappen meegeven. Mapbox GL JS tekent interactieve kaarten op basis van vector tiles met WebGL, waardoor je 3D-effecten kan creëren.

Van GML naar vector tiles

3D gebouwhoogte NL wordt geleverd in Geography Markup Language (GML)-formaat. Met ogr2ogr laden het bestand in PostGIS. In de database bereiden we vervolgens de data voor:

  • verwijder overbodige eigenschappen
  • projecteer de geometrie naar WGS-84
  • zet de winding order, de volgorde van de coördinaten

Met ogr2ogr exporteren we de data naar GeoJSON. Om de GeoJSON-bestanden om te zetten naar vector tiles gebruiken we tippecanoe, een command line tool van Mapbox.

Cartografische vormgeving

Van de 2D-geometrie van de gebouwen wordt op basis van de maximale hoogte met behulp van fill-extrusion een 3D-object gemaakt. Deze 3D-gebouwen worden pas op zoomniveau 13 en hoger getoond. Op lagere zoomniveaus wordt alleen de 2D-geometrie van de gebouwen getoond.

De gebouwen hebben een kleur gekregen op basis van een hoogteklasse. Hiervoor kan je natuurlijk allerlei statistische classificaties gebruiken, maar met een beetje logisch beredeneren kom je hier op uit:

  • Een verdieping is ongeveer 3 meter hoog (bijvoorbeeld schuurtjes)
  • Twee verdiepingen is 6 meter, een klein huis.
  • Drie verdiepingen, 9 meter, een standaard huis.
  • De rest ronden we af naar 15 m, 20 m, 40 m en 60 m.
  • De meeste kerktorens zijn 100 meter hoog.
  • Alles boven de 100 meter is hoogbouw.

Dit gaf meteen de inspiratie voor de legenda die ontworpen is met Inkscape. Het kleurenschema is geïnspireerd op de kaarten Melbourne Building Heights en Portland Oregon: The Age of a City.

Applicatie-ontwikkeling

De applicatie is gemaakt met HTML, CSS en JavaScript. Er worden meerdere JavaScript-bibliotheken gebruikt:

  • Mapbox GL JS: interactieve kaart-viewer voor vector tiles
  • Typeahead: automatische aanvullen van zoektermen

Om te voorkomen dat deze JavaScript-bibliotheken en de applicatie-specifieke code allemaal los worden ingeladen, zorgt Browserify ervoor, dat de code in een bestand wordt samengevoegd en zo compact mogelijk wordt opgeschreven.

De PDOK Locatieserver maakt het mogelijk om de kaart naar een bepaald adres of woonplaats te laten gaan. Het automatisch aanvullen van zoektermen dat Typeahead in de applicatie biedt, wordt ondersteund door de zogenaamde suggest service. Met de lookup service wordt ten slotte de detailinformatie over de geselecteerde plaats opgevraagd, zoals de coördinaten om de kaart op die plaats te centreren.

Resultaat

Met de aanpak die we hier hebben beschreven hebben we de applicatie Gebouwhoogte van Nederland gemaakt. Zo kan een grote hoeveelheid 3D-gegevens voor heel Nederland op een interactieve manier en in een gangbare Web-browser worden bekeken!

contact

Meer weten? Bel of mail ons gerust!

Webmapper is gevestigd in de
Social Impact Factory Utrecht:

Vredenburg 40

3511 BD Utrecht

info@webmapper.net

06 456 08 910