Kteroukoli z map kvality ovzduší v reálném čase z aqicn.org můžete vložit na svůj web pomocí jediného tagu skriptu.

Zkopírujte níže uvedený kód na místo, kde by se měla mapa na vaší stránce zobrazit:

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

Výsledek (pro aktualizaci výše uvedeného kódu posuňte nebo přiblížte mapu):

Aby se zabránilo zpoždění vykreslování stránky, lze skript načíst asynchronně pomocí atributu async nebo defer . Protože se skript poté nespustí na své pozici na stránce, je k určení prvku, do kterého je mapa vložena, vyžadován atribut data-dom-target . Prvek lze umístit kamkoli na stránce, před nebo za tag script.

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

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

Výsledek:

Načítání skriptu z javascriptu

Skript lze také vkládat dynamicky, například ze správce tagů nebo jednostránkové aplikace. Platí stejné pravidlo 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", "cs");
  document.head.appendChild(s);
</script>

Mapa je konfigurována s následujícími atributy tagu script. Všechny jsou volitelné, s výjimkou data-dom-target pro asynchronní načítání.

Na stejnou stránku lze vložit několik map: pro každou mapu použijte jeden tag skriptu.

Vyplňte níže uvedené možnosti a získejte kód pro vaši mapu, abyste si ji mohli prohlédnout.

• Odkazy v mapě (např. podrobnosti o stanici) se otevírají v nové kartě, takže návštěvníci neopouštějí vaši stránku.
• Mapu lze vložit na jakoukoli webovou stránku poskytovanou přes http nebo https . Nelze ji zobrazit ze stránky otevřené jako lokální soubor ( file:// ).
• Pokud je mapa umístěna v sandboxovém iframe, musí sandbox alespoň povolit allow-scripts allow-same-origin allow-popups .
• Prosím, neodstraňujte ani neskrývejte odkaz na projekt Světového indexu kvality ovzduší a zdroje dat.

Přímé použití prvku iframe

Pokud na stránku nemůžete přidat skripty, můžete mapu vložit také pomocí prostého iframe. Poloha je součástí adresy URL a zobrazení se nastavuje pomocí parametrů lat , lng a zoom :

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