आप एक स्क्रिप्ट टैग का उपयोग करके aqicn.org के किसी भी रीयल-टाइम वायु गुणवत्ता मानचित्र को अपनी वेबसाइट पर एम्बेड कर सकते हैं।

नीचे दिए गए कोड को अपनी वेबसाइट पर उस स्थान पर कॉपी करें जहां मानचित्र दिखाई देना चाहिए:

<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="hi"
        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="hi"
        data-dom-target="aqi-map"
        data-height="450"></script>

परिणाम:

जावास्क्रिप्ट से स्क्रिप्ट लोड हो रही है

इस स्क्रिप्ट को गतिशील रूप से भी सम्मिलित किया जा सकता है, उदाहरण के लिए टैग मैनेजर या सिंगल पेज एप्लिकेशन से। वही 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", "hi");
  document.head.appendChild(s);
</script>

मैप को स्क्रिप्ट टैग के निम्नलिखित एट्रिब्यूट्स के साथ कॉन्फ़िगर किया गया है। एसिंक्रोनस लोडिंग के लिए data-dom-target छोड़कर, ये सभी वैकल्पिक हैं।

एक ही पेज पर कई मैप एम्बेड किए जा सकते हैं: प्रत्येक मैप के लिए एक स्क्रिप्ट टैग का उपयोग करें।

अपने मैप का कोड प्राप्त करने और उसका पूर्वावलोकन करने के लिए नीचे दिए गए विकल्पों को भरें।

• मानचित्र में दिए गए लिंक (जैसे स्टेशन का विवरण) एक नए टैब में खुलते हैं, ताकि आगंतुक आपका पृष्ठ न छोड़ें।
• इस मानचित्र को http या https पर चलने वाली किसी भी वेबसाइट में एम्बेड किया जा सकता है। इसे स्थानीय फ़ाइल ( file:// ) के रूप में खोले गए पृष्ठ से प्रदर्शित नहीं किया जा सकता है।
• यदि मानचित्र को सैंडबॉक्स किए गए आईफ्रेम में रखा गया है, तो सैंडबॉक्स को कम से कम allow-scripts allow-same-origin allow-popups होगी।
• कृपया विश्व वायु गुणवत्ता सूचकांक परियोजना और डेटा स्रोतों के संदर्भ को हटाएं या छिपाएं नहीं।

सीधे iframe का उपयोग करना

यदि आप अपने पेज में स्क्रिप्ट नहीं जोड़ सकते हैं, तो मैप को एक साधारण iframe के साथ भी एम्बेड किया जा सकता है। स्थान URL का हिस्सा होता है, और दृश्य lat , lng और zoom मापदंडों के साथ सेट किया जाता है:

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