Anda dapat menyematkan peta kualitas udara real-time aqicn.org apa pun di situs web Anda dengan satu tag skrip.

Salin kode di bawah ini ke tempat peta seharusnya muncul di halaman Anda:

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

Hasil (geser atau perbesar peta untuk memperbarui kode di atas):

Untuk menghindari penundaan rendering halaman Anda, skrip dapat dimuat secara asinkron, dengan atribut async atau defer . Karena skrip kemudian tidak berjalan pada posisinya di halaman, atribut data-dom-target diperlukan untuk menentukan elemen tempat peta disisipkan. Elemen tersebut dapat ditempatkan di mana saja di halaman, sebelum atau setelah tag skrip.

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

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

Hasil:

Memuat skrip dari javascript

Skrip juga dapat disisipkan secara dinamis, misalnya dari pengelola tag atau aplikasi halaman tunggal. Aturan data-dom-target yang sama berlaku:

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

Peta dikonfigurasi dengan atribut-atribut berikut pada tag skrip. Semuanya bersifat opsional, kecuali data-dom-target untuk pemuatan asinkron.

Beberapa peta dapat disematkan pada halaman yang sama: gunakan satu tag skrip untuk setiap peta.

Isi opsi di bawah ini untuk mendapatkan kode peta Anda, dan pratinjau peta tersebut.

• Tautan di peta (misalnya detail stasiun) akan terbuka di tab baru, sehingga pengunjung tidak perlu meninggalkan halaman Anda.
• Peta ini dapat disematkan di situs web mana pun yang diakses melalui http atau https . Peta ini tidak dapat ditampilkan dari halaman yang dibuka sebagai file lokal ( file:// ).
• Jika peta ditempatkan di dalam iframe yang diisolasi (sandbox), maka isolasi tersebut setidaknya harus mengizinkan allow-scripts allow-same-origin allow-popups .
• Mohon jangan menghapus atau menyembunyikan atribusi kepada proyek Indeks Kualitas Udara Dunia dan sumber datanya.

Menggunakan iframe secara langsung

Jika Anda tidak dapat menambahkan skrip ke halaman Anda, peta juga dapat disematkan dengan iframe biasa. Lokasi merupakan bagian dari URL, dan tampilan diatur dengan parameter lat , lng dan zoom :

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