แผนที่คุณภาพอากาศแบบเรียลไทม์จากโครงการดัชนีคุณภาพอากาศโลก สามารถฝังลงในเว็บไซต์ใดก็ได้โดยใช้แท็กสคริปต์เพียงแท็กเดียว แผนที่นี้แสดงดัชนีคุณภาพอากาศแบบสดๆ ของสถานีตรวจวัดทั้งหมดรอบๆ ตำแหน่งที่เลือก และจะอัปเดตโดยอัตโนมัติ

คัดลอกโค้ดด้านล่างไปวางในตำแหน่งที่ต้องการให้แผนที่ปรากฏบนหน้าเว็บของคุณ:

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

ผลลัพธ์ (เลื่อนหรือซูมแผนที่เพื่ออัปเดตโค้ดด้านบน):

เพื่อหลีกเลี่ยงความล่าช้าในการแสดงผลหน้าเว็บ คุณสามารถโหลดสคริปต์แบบอะซิงโครนัสได้โดยใช้แอตทริบิวต์ async หรือ defer เนื่องจากสคริปต์จะไม่ทำงาน ณ ตำแหน่งที่กำหนดบนหน้าเว็บ คุณจึงจำเป็นต้องใช้แอตทริบิวต์ data-dom-target เพื่อระบุองค์ประกอบที่จะแทรกแผนที่ องค์ประกอบนี้สามารถวางไว้ที่ใดก็ได้บนหน้าเว็บ ไม่ว่าจะก่อนหรือหลังแท็กสคริปต์

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

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

ผลลัพธ์:

กำลังโหลดสคริปต์จาก JavaScript

สามารถแทรกสคริปต์แบบไดนามิกได้เช่นกัน ตัวอย่างเช่น จากตัวจัดการแท็กหรือแอปพลิเคชันหน้าเดียว กฎ 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", "th");
  document.head.appendChild(s);
</script>

แผนที่นี้ได้รับการกำหนดค่าด้วยแอตทริบิวต์ต่อไปนี้ของแท็กสคริปต์ แอตทริบิวต์ทั้งหมดเป็นตัวเลือก ยกเว้น data-dom-target สำหรับการโหลดแบบอะซิงโครนัส

สามารถฝังแผนที่หลายๆ แผนที่ไว้ในหน้าเดียวกันได้ โดยใช้แท็กสคริปต์หนึ่งแท็กต่อแผนที่หนึ่งแผนที่

กรอกข้อมูลในช่องด้านล่างเพื่อรับโค้ดสำหรับแผนที่ของคุณและดูตัวอย่าง

• ลิงก์ในแผนที่ (เช่น รายละเอียดสถานี) จะเปิดในแท็บใหม่ เพื่อให้ผู้เข้าชมไม่离开หน้าเว็บของคุณ
• แผนที่นี้สามารถฝังลงในเว็บไซต์ใดก็ได้ที่ให้บริการผ่าน http หรือ https แต่ไม่สามารถแสดงผลจากหน้าเว็บที่เปิดเป็นไฟล์ในเครื่อง ( file:// ) ได้
• หากแผนที่ถูกวางไว้ใน iframe ที่มีการจำกัดสิทธิ์การเข้าถึง (sandboxed) อย่างน้อยที่สุด sandbox นั้นจะต้องอนุญาตให้มีการ allow-scripts allow-same-origin allow-popups )
• โปรดอย่าลบหรือซ่อนการอ้างอิงถึงโครงการดัชนีคุณภาพอากาศโลกและแหล่งข้อมูล

การใช้ iframe โดยตรง

หากคุณไม่สามารถเพิ่มสคริปต์ลงในหน้าเว็บได้ คุณสามารถฝังแผนที่โดยใช้ iframe ธรรมดาได้เช่นกัน ตำแหน่งที่ตั้งจะเป็นส่วนหนึ่งของ URL และการแสดงผลจะถูกกำหนดด้วยพารามิเตอร์ lat , lng และ zoom :

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