Een 3D-kaartanimatie uit de postcode database

Hoe is deze animatie gemaakt?

Claude schreef één HTML-bestand. Three.js tekent het 3D-beeld, Web Audio maakt het geluid. Er zit geen geluidsbestand in: Claude berekende elke toon in code. Voor de video hierboven hebben we de animatie beeld voor beeld uit de browser opgenomen.

De adressen gingen er geteld in. Een 3D-kaart met 9,6 miljoen losse punten trekt geen browser, dus we telden ze eerst in SQL Server, met een paar vaste query's op het Zilver-bestand:

• Een raster van vakjes van 2,2 bij 2,2 km over heel Nederland. Elk vakje krijgt de provincie met de meeste adressen in dat vakje.
• Het aantal adressen, postcodes en gemeenten per provincie.
• Voor Amsterdam een fijner raster van 250 bij 250 meter. De hoogte van elk staafje is het aantal adressen in dat vakje.

Claude zette die tellingen in het HTML-bestand. Elk oranje blokje staat dus op een plek waar de BAG echt adressen heeft.

Welke gegevens zitten erin?

Alle getallen in beeld komen uit het Zilver-bestand. De vijf provincies, in de volgorde van de animatie:

• Noord-Holland: 1.668.850 adressen, 70.976 postcodes, 44 gemeenten
• Utrecht: 718.413 adressen, 33.764 postcodes, 26 gemeenten
• Zuid-Holland: 2.037.204 adressen, 87.717 postcodes, 50 gemeenten
• Noord-Brabant: 1.389.450 adressen, 67.146 postcodes, 56 gemeenten
• Gelderland: 1.106.935 adressen, 60.300 postcodes, 51 gemeenten

Aan het eind duikt de camera de gemeente Amsterdam in: 573.978 adressen, 19.140 postcodes en 5.161 straten. Dan typt de animatie één rij uit het bestand: Nieuwezijds Voorburgwal 147, 1012 RJ Amsterdam. Dat is het Koninklijk Paleis op de Dam. De BAG noemt het een bijeenkomstfunctie, met bouwjaar 1655.

Postbussen zitten niet in de bestanden. De data komt uit de BAG van het Kadaster, en die kent alleen adressen van echte gebouwen.

Kan ik dit zelf maken?

Ja, met het gratis Zilver-demobestand en Claude. Het demobestand heeft 1.000 adressen uit heel Nederland, met dezelfde kolommen als het volledige bestand. De prompt hieronder vraagt Claude om één HTML-bestand met blokjes op de plekken waar adressen liggen. Een speld springt langs de vijf grootste plaatsen in het bestand, met een teller erbij.

1. Download het Zilver-demobestand (demo-adressen-zilver.csv) op de demopagina.
2. Start een gesprek op claude.ai en voeg het CSV-bestand toe.
3. Kopieer de prompt hieronder, plak hem in het gesprek en verstuur hem.
4. Sla het HTML-bestand op dat Claude teruggeeft. Open het in je browser en kies met de bestandsknop het demobestand.

Ik heb een CSV-bestand met adressen uit de BAG bijgevoegd: demo-adressen-zilver.csv van Postcode.store. Het scheidingsteken is een puntkomma en de eerste regel bevat de kolomnamen. Gebruik deze kolommen: Latitude, Longitude, Plaats, Straat, Huisnummer en PostcodeVolledig.

Maak één HTML-bestand met een 3D-kaartanimatie van deze adressen in three.js. Laad three.js versie 0.160.0 als ES-module via een importmap, van https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js. Gebruik geen andere bibliotheken.

1. Laat mij het CSV-bestand kiezen met een bestandsknop. Het bestand blijft op mijn computer.
2. Reken Latitude en Longitude om naar x en z op een plat vlak. Een lineaire omrekening is genoeg voor Nederland. Vermenigvuldig het verschil in lengtegraad met 0,62, zodat het land niet uitgerekt wordt.
3. Verdeel de kaart in vakjes van ongeveer 5 bij 5 km. Zet op elk vakje met adressen een blokje. Hoe meer adressen in het vakje, hoe hoger het blokje. Maak de blokjes oranje (#f57e1c) op een lichtgrijze ondergrond, met schaduw.
4. Zoek de vijf plaatsen met de meeste adressen in het bestand. Een blauwe speld springt in een boog van plaats naar plaats, elke twee seconden een sprong.
5. Toon linksonder een kaartje met de plaatsnaam en het aantal adressen in die plaats. Laat dat getal bij elke landing optellen van 0 tot het eindgetal. Zet er één adres uit die plaats onder: straat, huisnummer en postcode.
6. Laat de camera langzaam om het midden van de kaart draaien. Na de vijfde plaats springt de speld terug naar de eerste, zodat de animatie blijft doorlopen.

Geef het volledige HTML-bestand terug, zonder uitleg.

Met 1.000 adressen krijg je een losse wolk blokjes over het land. Rond Amsterdam en Rotterdam staan de hoogste, want daar liggen in de demo de meeste adressen.

Geeft de browser een fout of blijft het scherm leeg? Druk op F12, kopieer de rode foutmelding uit de console en plak die in hetzelfde gesprek. Claude past het bestand dan aan.

Het demobestand staat op de demopagina, naast de demo's van de andere pakketten.

Welk bestand heb ik nodig?

Om te proberen is het gratis Zilver-demobestand genoeg. De prompt hierboven is erop geschreven.

Voor een kaart van alle adressen in Nederland heb je Zilver nodig. Daarin staat elk adres apart, met coördinaten, gebruiksdoel, oppervlakte en bouwjaar. Uit dat bestand komt de animatie hierboven.

Brons is de postcodetabel per postcode met huisnummerreeks, ook met coördinaten. Daarmee teken je een kaart per postcode. Tellen per adres kan er niet mee.

Werk je met het volledige bestand? 9,6 miljoen regels lees je niet in met een bestandsknop in de browser. Tel de adressen eerst per vakje in je database en geef Claude die telling. Zo hebben wij de animatie hierboven ook gemaakt.

Wat er in Brons, Zilver en Goud zit en wat het kost, staat op pakketten en prijzen.

Vragen over de kaartanimatie