Demo-pagina voor wie overweegt de bouwjaarkaart op zijn eigen website te plaatsen. Hieronder zie je de embed in vier veelvoorkomende configuraties, telkens met de bijbehorende HTML-code. Alles op deze pagina is live en interactief.
Geen advertenties, geen verkoop-CTA's, geen pop-ups. De embed bestaat uit de kaart, een legenda, en één kleine attributielink onder de kaart die terug verwijst naar Stadsprint. Niets meer.
De default-instellingen, zoals in de embed-code op de tool-pagina. Amsterdam centrum op zoomniveau 15, kaart-hoogte 400 pixels, dynamische kleurschaal aan (de kleuren passen zich aan op de zichtbare bouwjaren), legenda zichtbaar onderaan.
<div data-stadsprint-bouwjaarkaart
data-lat="52.37" data-lon="4.89"
data-zoom="15"></div>
<script src="https://stadsprint.nl/embed/bouwjaarkaart.js" async></script>Ingezoomd op Roombeek in Enschede (zoomniveau 17). De wijk werd na de vuurwerkramp van 13 mei 2000 vrijwel volledig herbouwd. Op de kaart kleurt het gebied direct als post-2000-bebouwing tussen de oudere omliggende straten. Ideaal voor lokale historische artikelen.
<div data-stadsprint-bouwjaarkaart
data-lat="52.2293" data-lon="6.9012"
data-zoom="17"></div>
<script src="https://stadsprint.nl/embed/bouwjaarkaart.js" async></script>Voor smalle pagina's of zijbalken: hoogte 280 pixels en geen legenda. Klikken op een pand toont nog steeds het bouwjaar. Geschikt als kleine inline-element naast tekstuele content.
<div data-stadsprint-bouwjaarkaart
data-lat="51.4827" data-lon="5.6557"
data-zoom="14"
data-height="280" data-legend="false"></div>
<script src="https://stadsprint.nl/embed/bouwjaarkaart.js" async></script>
Met data-dynamic-colors="false" blijft de kleurschaal vast (1400 tot 2025), ongeacht waar je inzoomt. Handig voor vergelijkingen tussen meerdere embeds op dezelfde pagina, want de kleuren betekenen dan overal hetzelfde. Hier ingezoomd op Helmond.
<div data-stadsprint-bouwjaarkaart
data-lat="51.4807" data-lon="5.6612"
data-zoom="14"
data-dynamic-colors="false"></div>
<script src="https://stadsprint.nl/embed/bouwjaarkaart.js" async></script>
Met data-search="true" verschijnt linksboven een zoekveld waarmee bezoekers naar elk Nederlands adres of plaatsnaam kunnen springen. Handig voor pagina's waar lezers hun eigen straat willen opzoeken zonder eerst handmatig in te zoomen.
<div data-stadsprint-bouwjaarkaart
data-lat="52.0907" data-lon="5.1214"
data-zoom="14"
data-search="true"></div>
<script src="https://stadsprint.nl/embed/bouwjaarkaart.js" async></script>