Sie können jede der Echtzeit-Luftqualitätskarten von aqicn.org mit einem einzigen Skript-Tag in Ihre Website einbetten.

Kopieren Sie den unten stehenden Code an die Stelle auf Ihrer Seite, an der die Karte erscheinen soll:

<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="de"
        data-height="450"></script>

Ergebnis (Karte verschieben oder zoomen, um den obigen Code zu aktualisieren):

Um Verzögerungen beim Seitenaufbau zu vermeiden, kann das Skript asynchron mit dem Attribut async oder defer geladen werden. Da das Skript dann nicht an seiner ursprünglichen Position auf der Seite ausgeführt wird, ist das Attribut data-dom-target erforderlich, um das Element anzugeben, in das die Karte eingefügt wird. Dieses Element kann an beliebiger Stelle auf der Seite platziert werden, vor oder nach dem `script`-Tag.

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

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

Ergebnis:

Das Skript wird aus JavaScript geladen.

Das Skript kann auch dynamisch eingefügt werden, beispielsweise von einem Tag-Manager oder einer Single-Page-Anwendung. Es gilt dieselbe data-dom-target Regel:

<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", "de");
  document.head.appendChild(s);
</script>

Die Karte wird mit den folgenden Attributen des Skript-Tags konfiguriert. Alle Attribute sind optional, außer data-dom-target für asynchrones Laden.

Mehrere Karten können auf derselben Seite eingebettet werden: Verwenden Sie pro Karte ein Script-Tag.

Füllen Sie die unten stehenden Optionen aus, um den Code für Ihre Karte zu erhalten und eine Vorschau anzuzeigen.

• Links in der Karte (z. B. Stationsdetails) öffnen sich in einem neuen Tab, damit die Besucher Ihre Seite nicht verlassen.
• Die Karte kann auf jeder Website eingebettet werden, die über http oder https bereitgestellt wird. Sie kann nicht von einer Seite angezeigt werden, die als lokale Datei ( file:// ) geöffnet wird.
• Wenn die Karte in einem isolierten iFrame platziert wird, muss die Sandbox mindestens die folgenden Berechtigungen erlauben allow-scripts allow-same-origin allow-popups .
• Bitte entfernen oder verbergen Sie nicht den Quellenverweis auf das Projekt „World Air Quality Index“ und auf die Datenquellen.

Direktes Verwenden eines iFrames

Falls Sie keine Skripte zu Ihrer Seite hinzufügen können, lässt sich die Karte auch mit einem einfachen iFrame einbetten. Der Standort ist Teil der URL, und die Ansicht wird über die Parameter lat , lng und zoom festgelegt.

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