Możesz osadzić na swojej stronie internetowej dowolną mapę jakości powietrza w czasie rzeczywistym aqicn.org za pomocą jednego znacznika skryptu.

Skopiuj poniższy kod w miejscu, w którym mapa powinna pojawić się na Twojej stronie:

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

Wynik (przesuń lub powiększ mapę, aby zaktualizować powyższy kod):

Aby uniknąć opóźnień w renderowaniu strony, skrypt można załadować asynchronicznie, używając atrybutu async lub defer . Ponieważ skrypt nie uruchamia się wtedy w swoim miejscu na stronie, atrybut data-dom-target jest wymagany do określenia elementu, w którym wstawiona jest mapa. Element można umieścić w dowolnym miejscu na stronie, przed lub po znaczniku script.

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

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

Wynik:

Ładowanie skryptu z JavaScript

Skrypt można również wstawić dynamicznie, na przykład z menedżera tagów lub aplikacji jednostronicowej. Obowiązuje ta sama reguła data-dom-target :

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

Mapa jest skonfigurowana z następującymi atrybutami znacznika skryptu. Wszystkie są opcjonalne, z wyjątkiem data-dom-target do ładowania asynchronicznego.

Na tej samej stronie można osadzić kilka map: należy użyć jednego znacznika skryptu na mapę.

Wypełnij poniższe opcje, aby uzyskać kod dla swojej mapy i wyświetlić jej podgląd.

• Linki na mapie (np. szczegóły stacji) otwierają się w nowej karcie, dzięki czemu odwiedzający nie opuszczają Twojej strony.
• Mapę można osadzić na dowolnej stronie internetowej obsługiwanej przez protokół http lub https . Nie można jej wyświetlić ze strony otwartej jako plik lokalny ( file:// ).
• Jeżeli mapa jest umieszczona w ramce iframe typu sandbox, piaskownica musi co najmniej zezwalać na allow-scripts allow-same-origin allow-popups .
• Prosimy nie usuwać ani nie ukrywać informacji o pochodzeniu projektu Światowego Indeksu Jakości Powietrza ani o źródłach danych.

Bezpośrednie korzystanie z ramki iframe

Jeśli nie możesz dodać skryptów do swojej strony, mapę można również osadzić w zwykłej ramce iframe. Lokalizacja jest częścią adresu URL, a widok jest ustawiany za pomocą parametrów lat , lng i zoom :

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