Je kunt alle realtime luchtkwaliteitskaarten van aqicn.org op je website integreren met één enkele scripttag.

Kopieer de onderstaande code naar de plek waar de kaart op uw pagina moet verschijnen:

<script src="https://aqicn.org/maplet/embed.v1.js"
        data-city="london"
        data-lat="51.5074" data-lng="-0.1278" data-zoom="11"
        data-lang="nl"
        data-height="450"></script>

Resultaat (verplaats of zoom in op de kaart om de bovenstaande code bij te werken):

Om te voorkomen dat het laden van uw pagina wordt vertraagd, kan het script asynchroon worden geladen met het attribuut async of defer . Omdat het script dan niet op de beoogde positie in de pagina wordt uitgevoerd, is het attribuut data-dom-target vereist om het element te specificeren waarin de kaart wordt ingevoegd. Dit element kan overal op de pagina worden geplaatst, vóór of na de scripttag.

<div id="aqi-map"></div>

<script async src="https://aqicn.org/maplet/embed.v1.js"
        data-city="paris"
        data-lang="nl"
        data-dom-target="aqi-map"
        data-height="450"></script>

Resultaat:

Het script laden vanuit JavaScript

Het script kan ook dynamisch worden ingevoegd, bijvoorbeeld vanuit een tagmanager of een single-page applicatie. Dezelfde data-dom-target regel is van toepassing:

<div id="aqi-map"></div>

<script>
  var s = document.createElement("script");
  s.src = "https://aqicn.org/maplet/embed.v1.js";
  s.setAttribute("data-city", "london");
  s.setAttribute("data-dom-target", "aqi-map");
  s.setAttribute("data-lang", "nl");
  document.head.appendChild(s);
</script>

De kaart is geconfigureerd met de volgende attributen van de scripttag. Ze zijn allemaal optioneel, behalve data-dom-target voor asynchroon laden.

Meerdere kaarten kunnen op dezelfde pagina worden ingesloten: gebruik één scripttag per kaart.

Vul de onderstaande opties in om de code voor uw kaart te ontvangen en deze te bekijken.

• Links op de kaart (bijvoorbeeld stationsinformatie) openen in een nieuw tabblad, zodat bezoekers uw pagina niet verlaten.
• De kaart kan worden ingesloten op elke website die via http of https wordt aangeboden. De kaart kan niet worden weergegeven vanaf een pagina die als lokaal bestand is geopend ( file:// ).
• Als de kaart in een afgeschermde iframe wordt geplaatst, moet de afgeschermde omgeving minimaal de volgende rechten toestaan allow-scripts allow-same-origin allow-popups .
• Verwijder of verberg de vermelding van het World Air Quality Index-project en de gegevensbronnen niet.

Een iframe rechtstreeks gebruiken

Als je geen scripts aan je pagina kunt toevoegen, kan de kaart ook worden ingesloten met een eenvoudige iframe. De locatie maakt deel uit van de URL en de weergave wordt ingesteld met de parameters lat , lng en zoom .

<iframe src="https://aqicn.org/maplet/london/nl/?lat=51.5074&lng=-0.1278&zoom=11"
        width="100%" height="450" style="border:0" loading="lazy"
        title="Real-time air quality map"></iframe>