Você pode incorporar qualquer um dos mapas de qualidade do ar em tempo real do aqicn.org em seu site com uma única tag de script.

Copie o código abaixo para o local onde o mapa deve aparecer na sua página:

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

Resultado (mova ou amplie o mapa para atualizar o código acima):

Para evitar atrasos na renderização da sua página, o script pode ser carregado de forma assíncrona, com o atributo async ou defer . Como o script não é executado exatamente na mesma posição na página, o atributo data-dom-target é necessário para especificar o elemento no qual o mapa será inserido. O elemento pode ser colocado em qualquer lugar da página, antes ou depois da tag `<script>`.

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

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

Resultado:

Carregando o script do javascript

O script também pode ser inserido dinamicamente, por exemplo, a partir de um gerenciador de tags ou de um aplicativo de página única. A mesma regra data-dom-target se aplica:

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

O mapa é configurado com os seguintes atributos da tag script. Todos são opcionais, exceto data-dom-target para carregamento assíncrono.

É possível incorporar vários mapas na mesma página: utilize uma tag de script para cada mapa.

Preencha as opções abaixo para obter o código do seu mapa e visualizá-lo.

• Os links no mapa (por exemplo, detalhes da estação) abrem em uma nova aba, para que os visitantes não saiam da sua página.
• O mapa pode ser incorporado em qualquer site servido via http ou https . Ele não pode ser exibido a partir de uma página aberta como um arquivo local ( file:// ).
• Se o mapa for colocado em um iframe isolado (sandbox), o sandbox deve permitir pelo menos allow-scripts allow-same-origin allow-popups .
• Por favor, não remova nem oculte a atribuição ao projeto Índice Mundial de Qualidade do Ar e às fontes de dados.

Utilizando um iframe diretamente

Se não for possível adicionar scripts à sua página, o mapa também pode ser incorporado em um iframe simples. A localização faz parte da URL e a visualização é definida pelos parâmetros de lat , lng e zoom :

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