Stookwijzer-widget op eigen website zetten
De Stookwijzer helpt mensen om een verantwoorde keuze te maken over het stoken van hout. Op basis van de luchtkwaliteit en de weersverwachting geeft hij aan of het verstandig is om de open haard, vuurkorf of houtkachel te gebruiken.
Gemeenten, provincies en andere (overheids)organisaties kunnen dit advies met de Stookwijzer-widget op hun eigen website tonen, bijvoorbeeld op een homepagina of een pagina over luchtkwaliteit. Het lokale stookadvies is dan direct zichtbaar. Zo worden inwoners zich meer bewust van houtrook. Dit helpt bij een gezonde en schone leefomgeving.
Hiernaast zie je een voorbeeld van de widget voor Zaanstad. Volg het stappenplan hieronder om de widget op je eigen website te plaatsen.
Stappenplan widget implementeren
Framecode
Iframecode
Met deze iframecode kun je de Stookwijzer-widget op je website plaatsen. Je moet deze code nog wel aanpassen voor jouw situatie. Zie de vervolgstappen.
<iframe src="https://atlas.apps.geodan.nl/stookwijzer/widget? locatie=Zaanstad&x=114239&y=497771&z=7" title="Stookwijzer" sandbox="allow-scripts allow-same-origin" width="700" height="500" style="border: unset; margin: 0;"></iframe>
Uitleg van de onderdelen
| Onderdeel | Betekenis |
|---|---|
| locatie | Naam van de plaats die je wilt laten zien in de widget |
| x | x-coördinaat (punt op de kaart) van het midden van het gebied (Rijksdriehoekstelsel/RD) |
| y | y-coördinaat (punt op de kaart) van het midden van het gebied (Rijksdriehoekstelsel/RD) |
| z | Hoe ver je inzoomt op de kaart |
| title | De titel van de widget |
| sandbox | Veiligheidsinstellingen - allow-scripts: JavaScript kan worden uitgevoerd binnen het iframe - allow-same-origin: communicatie met server |
| width | Breedte van de widget |
| height | Hoogte van de widget |
| style | Instellingen voor de rand en ruimte om de widget; “border: unset en margin: 0” zorgen ervoor dat er geen randen om de widget komen |
coordinaten aanpassen
Verander deze onderdelen in de iframecode
- locatie: de naam van je gemeente of plaats
- x en y: het midden van het gebied (coördinaten)
- z: hoe ver je inzoomt (meestal 6 of 7 voor een stad)
Uitleg over x- en y-coördinaten
- Neem voor de x- en y-coördinaten het middelpunt van het gebied dat je wilt tonen.
- Voor de nauwkeurige RD-coördinaten: bekijk de PDOK Viewer. Open de kaart, zoek het gebied, ga naar het midden en lees de coördinaten af.
formaat
Stel hoogte en breedte in
De grootte van de widget stel je in met width (breedte) en height (hoogte) in de iframecode. Je kunt zelf een formaat kiezen. De voorbeelden hieronder laten een paar handige mogelijkheden zien
Grootste formaat: 700 x 500 pixels
Gebruik dit formaat als je genoeg ruimte hebt, bijvoorbeeld op een hele pagina. In de widget hieronder zie je Zaanstad.
<iframe src="https://atlas.apps.geodan.nl/stookwijzer/widget? locatie=Zaanstad&x=114239&y=497771&z=7" title="Stookwijzer" sandbox="allow-scripts allow-same-origin" width="700" height="500" style="border: unset; margin: 0;"></iframe>
Middelgroot formaat: 400 x 400 pixels
Handig als je minder ruimte hebt, bijvoorbeeld naast andere informatie. In de widget hieronder zie je Arnhem.
<iframe src="https://atlas.apps.geodan.nl/stookwijzer/widget? locatie=Arnhem&x=190380&y=443066&z=6" title="Stookwijzer" sandbox="allow-scripts allow-same-origin" width="400" height="400" style="border: unset; margin: 0;"></iframe>
Kleinste formaat: 350 x 300 pixels
Dit formaat is handig als je maar beperkt de ruimte hebt. In de widget hieronder zie je het dorp Driewegen.
<iframe src="https://atlas.apps.geodan.nl/stookwijzer/widget? locatie=Driewegen&x=44412&y=382006&z=7" title="Stookwijzer" sandbox="allow-scripts allow-same-origin" width="350" height="300" style="border: unset; margin: 0;"></iframe>
Plaats widget op website
Plaats de aangepaste iframecode op de gewenste plek in de broncode.
Let op:
- Iframes moeten toegestaan zijn binnen het CMS
- Zo niet: whitelist of gebruik een embed-/HTML-module
groot scherm
Je kunt de widget ook op volledig scherm tonen. Dit is handig voor een groot scherm, bijvoorbeeld in een gemeentehuis.
Gebruik deze code
<iframe src="https://atlas.apps.geodan.nl/stookwijzer/widget?locatie=Zaanstad&x=1142…"
title="Stookwijzer"
sandbox="allow-scripts allow-same-origin"
width="100%" height="100%"
style="border: unset; margin: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
</iframe>
Pas deze onderdelen aan
- Zet 'width' en 'height' op 100%.
- Zet 'top', 'bottom', 'left' en 'right' allemaal op 0.
- Gebruik 'position: absolute'.
Hierdoor vult de widget het hele scherm.
Met 'border: unset' en 'margin: 0' zie je geen randen om de widget.