Bản đồ chất lượng không khí thời gian thực của dự án Chỉ số Chất lượng Không khí Thế giới có thể được nhúng vào bất kỳ trang web nào chỉ với một thẻ script. Bản đồ hiển thị Chỉ số Chất lượng Không khí trực tiếp của tất cả các trạm giám sát xung quanh vị trí đã chọn và được cập nhật tự động.

Sao chép đoạn mã bên dưới vào vị trí bạn muốn hiển thị bản đồ trên trang của mình:

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

Kết quả (di chuyển hoặc phóng to bản đồ để cập nhật đoạn mã phía trên):

Để tránh làm chậm quá trình hiển thị trang, bạn có thể tải tập lệnh bất đồng bộ bằng thuộc tính async hoặc defer . Vì tập lệnh khi đó không chạy tại vị trí của nó trên trang, nên thuộc tính data-dom-target là cần thiết để chỉ định phần tử mà bản đồ được chèn vào. Phần tử này có thể được đặt ở bất kỳ đâu trên trang, trước hoặc sau thẻ `<script>`.

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

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

Kết quả:

Tải tập lệnh từ javascript

Đoạn mã cũng có thể được chèn động, ví dụ như từ trình quản lý thẻ hoặc ứng dụng trang đơn. Quy tắc data-dom-target vẫn được áp dụng như cũ:

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

Bản đồ được cấu hình với các thuộc tính sau của thẻ script. Tất cả đều là tùy chọn, ngoại trừ data-dom-target dành cho việc tải không đồng bộ.

Bạn có thể nhúng nhiều bản đồ trên cùng một trang: hãy sử dụng một thẻ script cho mỗi bản đồ.

Hãy điền thông tin vào các tùy chọn bên dưới để nhận mã bản đồ và xem trước.

• Các liên kết trên bản đồ (ví dụ: thông tin chi tiết về nhà ga) sẽ mở trong một tab mới, giúp khách truy cập không rời khỏi trang của bạn.
• Bản đồ có thể được nhúng vào bất kỳ trang web nào được phục vụ qua http hoặc https . Nó không thể được hiển thị từ một trang được mở dưới dạng tệp cục bộ ( file:// ).
• Nếu bản đồ được đặt trong iframe có hộp cát, thì hộp cát đó phải cho phép ít nhất allow-scripts allow-same-origin allow-popups .
• Vui lòng không xóa hoặc che giấu phần ghi chú nguồn gốc từ dự án Chỉ số Chất lượng Không khí Thế giới và các nguồn dữ liệu.

Sử dụng iframe trực tiếp

Nếu bạn không thể thêm mã script vào trang của mình, bạn cũng có thể nhúng bản đồ bằng iframe thông thường. Vị trí là một phần của URL, và chế độ xem được thiết lập bằng các tham số lat , lng và zoom :

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