Vous pouvez intégrer n'importe quelle carte de la qualité de l'air en temps réel d'aqicn.org sur votre site web à l'aide d'une simple balise script.

Copiez le code ci-dessous à l'endroit où la carte doit apparaître sur votre 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-lang="fr"
        data-height="450"></script>

Résultat (déplacez ou zoomez sur la carte pour mettre à jour le code ci-dessus) :

Pour éviter de retarder l'affichage de votre page, le script peut être chargé de manière asynchrone, grâce à l'attribut async ou defer . Comme le script ne s'exécute alors pas à son emplacement d'origine sur la page, l'attribut data-dom-target est nécessaire pour spécifier l'élément dans lequel la carte est insérée. Cet élément peut être placé n'importe où sur la page, avant ou après la balise `<script>`.

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

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

Résultat:

Chargement du script depuis JavaScript

Le script peut également être inséré dynamiquement, par exemple depuis un gestionnaire de balises ou une application monopage. La même règle data-dom-target s'applique :

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

La carte est configurée avec les attributs suivants de la balise script. Ils sont tous facultatifs, sauf data-dom-target pour le chargement asynchrone.

Plusieurs cartes peuvent être intégrées sur la même page : utilisez une balise script par carte.

Remplissez les champs ci-dessous pour obtenir le code de votre carte et en avoir un aperçu.

• Les liens présents sur la carte (par exemple, les informations sur les stations) s'ouvrent dans un nouvel onglet, afin que les visiteurs ne quittent pas votre page.
• La carte peut être intégrée à n'importe quel site web servi via http ou https . Elle ne peut pas être affichée à partir d'une page ouverte en tant que fichier local ( file:// ).
• Si la carte est placée dans une iframe en mode sandbox, le sandbox doit au moins allow-scripts allow-same-origin allow-popups .
• Veuillez ne pas supprimer ni masquer la mention du projet World Air Quality Index et des sources de données.

Utiliser directement une iframe

Si vous ne pouvez pas ajouter de scripts à votre page, la carte peut également être intégrée à l'aide d'une simple iframe. La localisation fait partie de l'URL et l'affichage est défini par les paramètres lat , lng et zoom .

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