আপনি একটিমাত্র স্ক্রিপ্ট ট্যাগ ব্যবহার করে আপনার ওয়েবসাইটে 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="bn"
        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="bn"
        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", "bn");
  document.head.appendChild(s);
</script>

ম্যাপটি স্ক্রিপ্ট ট্যাগের নিম্নলিখিত অ্যাট্রিবিউটগুলো দিয়ে কনফিগার করা হয়েছে। অ্যাসিঙ্ক্রোনাস লোডিংয়ের জন্য data-dom-target ছাড়া বাকি সবগুলোই ঐচ্ছিক।

একই পৃষ্ঠায় একাধিক মানচিত্র যুক্ত করা যেতে পারে: প্রতিটি মানচিত্রের জন্য একটি করে স্ক্রিপ্ট ট্যাগ ব্যবহার করুন।

আপনার ম্যাপের কোড পেতে ও সেটির প্রিভিউ দেখতে নিচের অপশনগুলো পূরণ করুন।

• মানচিত্রের লিঙ্কগুলি (যেমন স্টেশনের বিবরণ) একটি নতুন ট্যাবে খোলে, যাতে পরিদর্শকরা আপনার পৃষ্ঠা ছেড়ে চলে না যান।
• মানচিত্রটি http বা https এর মাধ্যমে পরিবেশিত যেকোনো ওয়েবসাইটে এম্বেড করা যেতে পারে। এটি স্থানীয় ফাইল ( file:// ) হিসাবে খোলা কোনো পৃষ্ঠা থেকে প্রদর্শন করা যায় না।
• যদি ম্যাপটি একটি স্যান্ডবক্সড আইফ্রেমে রাখা হয়, তাহলে স্যান্ডবক্সটিতে অন্তত allow-scripts allow-same-origin allow-popups থাকতে হবে।
• অনুগ্রহ করে ওয়ার্ল্ড এয়ার কোয়ালিটি ইনডেক্স প্রকল্প এবং ডেটার উৎসগুলোর স্বীকৃতি মুছে ফেলবেন না বা গোপন করবেন না।

সরাসরি একটি আইফ্রেম ব্যবহার করে

যদি আপনি আপনার পেজে স্ক্রিপ্ট যোগ করতে না পারেন, তবে মানচিত্রটি একটি সাধারণ আইফ্রেমের মাধ্যমেও এমবেড করা যেতে পারে। অবস্থানটি ইউআরএল-এর একটি অংশ, এবং lat (lat), lng ও zoom প্যারামিটার দিয়ে ভিউটি সেট করা হয়:

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