The real-time air quality map of the World Air Quality Index project can be embedded on any website with a single script tag. The map shows the live Air Quality Index of all the monitoring stations around the selected location, and is updated automatically.

Copy the code below where the map should appear on your page:

<script src="https://aqicn.org/maplet/embed.v1.js"
        data-city="london"
        data-lat="51.5074" data-lng="-0.1278" data-zoom="11"
        data-height="450"></script>

Result (move or zoom the map to update the code above):

To avoid delaying the rendering of your page, the script can be loaded asynchronously, with the async or defer attribute. Since the script then does not run at its position in the page, the data-dom-target attribute is required to specify the element in which the map is inserted. The element can be placed anywhere in the page, before or after the script tag.

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

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

Result:

Loading the script from javascript

The script can also be inserted dynamically, for instance from a tag manager or a single page application. The same data-dom-target rule applies:

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

The map is configured with the following attributes of the script tag. They are all optional, except data-dom-target for asynchronous loading.

Several maps can be embedded on the same page: use one script tag per map.

Fill in the options below to get the code for your map, and preview it.

• Links in the map (eg station details) open in a new tab, so that visitors do not leave your page.
• The map can be embedded on any website served over http or https. It can not be displayed from a page opened as a local file (file://).
• If the map is placed in a sandboxed iframe, the sandbox must at least allow allow-scripts allow-same-origin allow-popups.
• Please do not remove or hide the attribution to the World Air Quality Index project and to the data sources.

Using an iframe directly

If you can not add scripts to your page, the map can also be embedded with a plain iframe. The location is part of the url, and the view is set with the lat, lng and zoom parameters:

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