Aqicn.org'un gerçek zamanlı hava kalitesi haritalarından herhangi birini tek bir script etiketiyle web sitenize ekleyebilirsiniz.

Haritanın sayfanızda görünmesini istediğiniz yere aşağıdaki kodu kopyalayın:

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

Sonuç (yukarıdaki kodu güncellemek için haritayı hareket ettirin veya yakınlaştırın):

Sayfanızın oluşturulmasını geciktirmemek için, komut dosyası async veya defer özniteliğiyle eşzamansız olarak yüklenebilir. Komut dosyası bu durumda sayfadaki konumunda çalışmadığı için, haritanın ekleneceği öğeyi belirtmek üzere data-dom-target özniteliği gereklidir. Bu öğe, sayfanın herhangi bir yerine, komut dosyası etiketinden önce veya sonra yerleştirilebilir.

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

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

Sonuç:

JavaScript'ten komut dosyası yükleniyor.

Komut dosyası, örneğin bir etiket yöneticisinden veya tek sayfa uygulamasından dinamik olarak da eklenebilir. Aynı data-dom-target kuralı geçerlidir:

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

Harita, komut dosyası etiketinin aşağıdaki öznitelikleriyle yapılandırılmıştır. Bunların tümü isteğe bağlıdır, yalnızca eşzamansız yükleme için data-dom-target gereklidir.

Aynı sayfaya birden fazla harita yerleştirilebilir: her harita için bir script etiketi kullanın.

Haritanızın kodunu almak ve önizlemesini görmek için aşağıdaki seçenekleri doldurun.

• Haritadaki bağlantılar (örneğin istasyon bilgileri) yeni bir sekmede açılır, böylece ziyaretçiler sayfanızdan ayrılmazlar.
• Harita http veya https üzerinden sunulan herhangi bir web sitesine yerleştirilebilir. Yerel dosya olarak açılan bir sayfadan ( file:// ) görüntülenemez.
• Harita, korumalı bir iframe içine yerleştirilirse, korumalı alanın en azından allow-scripts allow-same-origin allow-popups vermesi gerekir.
• Lütfen Dünya Hava Kalitesi Endeksi projesine ve veri kaynaklarına yapılan atıfları kaldırmayın veya gizlemeyin.

Bir iframe'i doğrudan kullanarak

Sayfanıza komut dosyaları ekleyemiyorsanız, harita düz bir iframe ile de yerleştirilebilir. Konum URL'nin bir parçasıdır ve görünüm lat , lng ve zoom parametreleriyle ayarlanır:

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