آپ اپنی ویب سائٹ پر 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="ur"
        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="ur"
        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", "ur");
  document.head.appendChild(s);
</script>

نقشہ کو اسکرپٹ ٹیگ کی درج ذیل خصوصیات کے ساتھ ترتیب دیا گیا ہے۔ یہ سب اختیاری ہیں، سوائے data-dom-target کے غیر مطابقت پذیر لوڈنگ کے۔

ایک ہی صفحہ پر کئی نقشے سرایت کر سکتے ہیں: فی نقشہ ایک اسکرپٹ ٹیگ استعمال کریں۔

اپنے نقشے کا کوڈ حاصل کرنے کے لیے نیچے دیے گئے اختیارات کو پُر کریں، اور اس کا پیش نظارہ کریں۔

• نقشے میں لنکس (مثلاً اسٹیشن کی تفصیلات) ایک نئے ٹیب میں کھلتے ہیں، تاکہ زائرین آپ کا صفحہ نہ چھوڑیں۔
• نقشہ کو http یا https پر پیش کی جانے والی کسی بھی ویب سائٹ پر سرایت کیا جا سکتا ہے۔ اسے مقامی فائل ( file:// ) کے طور پر کھولے گئے صفحہ سے ظاہر نہیں کیا جا سکتا۔
• اگر نقشہ کو ایک سینڈ باکس والے iframe میں رکھا گیا ہے تو، سینڈ باکس کو کم از کم allow-scripts allow-same-origin allow-popups چاہیے۔
• براہ کرم ورلڈ ایئر کوالٹی انڈیکس پروجیکٹ اور ڈیٹا کے ذرائع سے انتساب کو نہ ہٹائیں اور نہ ہی چھپائیں۔

براہ راست iframe استعمال کرنا

اگر آپ اپنے صفحہ میں اسکرپٹ شامل نہیں کر سکتے ہیں، تو نقشے کو ایک سادہ iframe کے ساتھ بھی سرایت کیا جا سکتا ہے۔ مقام url کا حصہ ہے، اور منظر lat ، lng اور zoom پیرامیٹرز کے ساتھ سیٹ کیا گیا ہے:

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