Das Luftdatentool wird über einen iFrame eingebunden. Das direkte Aufrufen des Luftdatenttools ohne iFrame für zu einem Redirect auf die Startseite. Das UBA braucht die Angaben über die Domains der Seiten, auf denen der iFrame eingebunden wird, damit diese freigeschaltet werden können. Ist das erfolgt, fügen Sie folgenden Code Ihrer Seite hinzu.
<iframe src="https://luftdaten.umweltbundesamt.de/air-data/[1]/[2]" width="100%" height="600" id="air-data-iframe" style="transition:height .25s ease-in-out" allow="clipboard-read 'self' luftdaten.umweltbundesamt.de; clipboard-write 'self' luftdaten.umweltbundesamt.de; geolocation 'self' luftdaten.umweltbundesamt.de"></iframe>
<script>window.onmessage=function(e){document.getElementById("air-data-iframe").height=e.data.height+"px"};</script>Sie müssen nur die URL im SRC-Attribut anpassen, in dem Sie die Platzhalter [1] und [2] mit den richtigen Werten ersetzen.
https://luftdaten.umweltbundesamt.de/air-data/[1]/[2][1]: Das Kürzel Ihres Netzwerks in Kleinbuchstaben
[2]: Die Seite, zu der Sie Zugriff haben. Folgende Möglichkeiten gibt es:
- overview
- air-quality
- maps
- stations
- exceedances
- annual-tabulation
- annual-maps
Nur den Inhalt anzeigen (Show only content)
Diese Feature bewirkt, dass beim Einbinden einer Seite über den iFrame nur der reine Inhalt ohne Einleitungstext, Tabs und Kontaktinformationen angezeigt wird. So können Sie z. B. ihre Menüstruktur beibehalten in dem Sie einzelne Seite mit jeweils einem iFrame anlegen. Dieses Feature kann aber nur pro Netzwerk nicht jedoch pro Seite gesetzt werden. Sagen Sie dem UBA Bescheid, wenn die dieses Feature nutzen wollen.
Höhe des iFrames
Die Höhe des iFrame wird automatisch angepasst, je nach dem wie hoch dessen Inhalt ist. Bitte ändern Sie nicht das ID-Attribut, da die automatische Höhenanpassung sonst nicht mehr funktioniert. Oder Sie ändern das ID-Attribut des iFrames UND das JavaScript bei getElementById().
Content-Security-Policy (CSP-Header)
Sollte der Server, auf dem Ihre Seite läuft, einen Content-Security-Policy-Header ausliefern, so achten Sie bitte darauf, dass dort die Domain des Luftdatentools hinterlegt ist. Also luftdaten.umweltbundesamt.de. Ansonsten kann es sein, dass der Zugriff auf das Luftdatentool verweigert wird. Dies ist eine Einstellung, die Sie oder Ihr IT-Dienstleister auf Ihrer Seite machen müssen.
Typischerweise sieht ein solcher Header dann so aus:
content-security-policy: default-src 'self' https://luftdaten.umweltbundesamt.deFür weitere Informationen finden Sie auf https://content-security-policy.com/ oder https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy.