এয়ার কোয়ালিটি ও পরাগ সংক্রান্ত টাইল

উদ্দেশ্য

এয়ার কোয়ালিটি এবং পোলেন API, যেকোনও লোকেশনে ট্রিপ বা ম্যাপে আরও ইনসাইট যোগ করার দারুণ সুযোগ অফার করে। এইসব API থেকে উপলভ্য ডেটা ব্যবহার করার দুটি উপায় আছে: টেক্সট হিসেবে ইন্ডেক্স করা অথবা রাস্টার ইমেজ হিসেবে হিটম্যাপ টাইল।

alt_text

হিটম্যাপ টাইল API এন্ডপয়েন্ট ব্যবহার করার সময়, আপনি স্বতন্ত্র রাস্টার টাইল লোড করার সময় কিছু সমস্যার সম্মুখীন হতে পারেন, যেমন:

  • ওয়েবে Google Map-এ কীভাবে টাইল লোড করতে হয়? (এছাড়াও, API-এর ব্যবহারের শর্তাবলী মেনে চলতে)
  • অভিজ্ঞতা চলাকালীন অনুরোধের সংখ্যা কীভাবে ম্যানেজ করতে হয়?
  • টাইলসের মান কীভাবে পড়তে হয়?

ব্যবহারের নমুনা

উপরের প্রশ্নের উত্তর দেওয়ার জন্য আপনাকে ব্যবহারের নমুনা দেখানো হবে।

  • কোনও এলাকার এয়ার কোয়ালিটি ও পরাগ : এক বা একাধিক কাস্টম পলিগনের মধ্যে হিটম্যাপ টাইল (বর্তমান পরিস্থিতি) রাস্টার ডেটা ভিজ্যুয়ালাইজ করুন।
  • এয়ার কোয়ালিটি ও পরাগরেণু রুটের সাথে: রুটের ওয়েপয়েন্টে ম্যাপ করা হিটম্যাপ টাইল (বর্তমান পরিস্থিতি) রাস্টার ডেটা ভিজ্যুয়ালাইজ করুন।

প্রয়োগ

আপনি জানতে পারবেন যে কোন কোন টাইল উপলভ্য এবং কীভাবে সেগুলি ওয়েব অভিজ্ঞতায় লোড করা যায়। এছাড়াও, ম্যাপে টাইল লোড করা হলে, অনুরোধের সংখ্যা ম্যানেজ করার জন্য কী করা যেতে পারে তা আপনি দেখতে পাবেন। সবশেষে, কীভাবে টাইল পড়তে হয় তা আপনাকে দেখানো হবে।

ধরন অনুযায়ী উপলভ্য হিটম্যাপ টাইল

Air Quality API

- UAQI_RED_GREEN (UAQI, লাল-সবুজ প্যালেট): ইউনিভার্সাল এয়ার কোয়ালিটি ইন্ডেক্স লাল-সবুজ প্যালেট।
- UAQI_INDIGO_PERSIAN (UAQI, indigo-persian palette): ইউনিভার্সাল এয়ার কোয়ালিটি ইন্ডেক্স ইন্ডিগো-পার্সিয়ান প্যালেট।
- PM25_INDIGO_PERSIAN: PM2.5 ইন্ডেক্স ইন্ডিগো-পার্সিয়ান প্যালেট।
- GBR_DEFRA: দৈনিক এয়ার কোয়ালিটি সংক্রান্ত ইন্ডেক্স (UK) রঙের প্যালেট।
- DEU_UBA: জার্মান লোকাল এয়ার কোয়ালিটি সংক্রান্ত ইন্ডেক্সের রঙের প্যালেট।
- CAN_EC: কানাডিয়ান এয়ার কোয়ালিটি সংক্রান্ত স্বাস্থ্য ইন্ডেক্সের রঙের প্যালেট।
- FRA_ATMO: ফ্রান্সের এয়ার কোয়ালিটি সংক্রান্ত ইন্ডেক্সের কালার প্যালেট।
- US_AQI: মার্কিন যুক্তরাষ্ট্রের এয়ার কোয়ালিটি সংক্রান্ত ইন্ডেক্সের কালার প্যালেট।

Pollen API

- TREE_UP: হিটম্যাপের ধরনটি একটি ট্রি ইনডেক্স গ্রাফিক্যাল ম্যাপ দেখাবে।
- GRASS_UPI: হিটম্যাপের ধরনটি একটি গ্রাস ইনডেক্স গ্রাফিক্যাল ম্যাপের প্রতিনিধিত্ব করবে।
- WEED_UPI: হিটম্যাপের ধরনটি আগাছা সূচকের গ্রাফিক্যাল ম্যাপ দেখাবে।

ওয়েবে হিটম্যাপ টাইল দেখুন

টাইল লোড করুন এবং ম্যাপের ভিউপোর্টের শুধুমাত্র পছন্দসই অংশ দেখানোর জন্য ভেক্টর মাস্ক প্রয়োগ করুন।

টাইল লোড করা হচ্ছে

  • Google basemap লোড করতে Maps JavaScript API ব্যবহার করুন এবং রাস্টার টাইল ছবি লোড করার জন্য প্রস্তুত করতে deckgl লাইব্রেরি লোড করুন।
  • এয়ার কোয়ালিটি হিটম্যাপ টাইল লোড করতে deck.gl TileLayer ব্যবহার করুন। এর ফলে হিটম্যাপ টাইলসের উপরে Google Maps-এর বেজম্যাপ লেবেল (Maps JavaScript কাস্টম ওভারলে-এর মতো নয়) দেখানো হবে

import { TileLayer } from "deck.gl";
import { GoogleMapsOverlay } from "@deck.gl/google-maps";

// const TileLayer = deck.TileLayer;
// const GoogleMapsOverlay = deck.GoogleMapsOverlay;

// Initialize and add the map
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40, lng: -110 },
    zoom: 4,
  });

  const apiKey = 'YOUR_API_KEY';
 const airqualityType = 'UAQI_RED_GREEN' // AirQuality API heatmap type
  const deckOverlay = new GoogleMapsOverlay({
    layers: [
       // Heatmap Tiles layer
new TileLayer({
    id: 'heatmap-tiles',
    data: 'https://airquality.googleapis.com/v1/mapTypes/'+ heatmapType + +'/heatmapTiles/{z}/{x}/{y}?key=' + apiKey,
...
 })
    ],
  });

  deckOverlay.setMap(map);
}

window.initMap = initMap;

ভেক্টর মাস্ক প্রয়োগ করা হচ্ছে

আপনি হিটম্যাপ টাইলের যেকোনও অংশ ভিজ্যুয়ালি লুকাতে বা দেখাতে পারবেন। গুরুত্বপূর্ণ: হিটম্যাপ টাইলসে প্রয়োগ করা ভেক্টর মাস্ক তৈরি করতে আপনাকে ডেটা সংগ্রহ করতে হবে।

  • কোনও এলাকায়:

    • এয়ার কোয়ালিটি TileLayer-এর উপরে Mask তৈরি করতে, deck.gl GeoJson ব্যবহার করুন।

alt_text

নিচের উদাহরণে ফ্রান্সের একাধিক বহুভুজ geojson ব্যবহার করা হচ্ছে 

// geojson sample

{  "type": "Feature",
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [[[[-54.111527,2.11427],...[-54.194491,2.163073]]]]
  },
  "properties": {
    "name": "France"
  }
}

deckgl প্রয়োগ করার জন্য এখানে একটি রেফারেন্স দেওয়া হল: 

  // Loaded layers in maps overlay
  const deckOverlay = new GoogleMapsOverlay({ layers: layers });
  const MaskExtension = deck.MaskExtension; // or import extension
  ...

  // As part of object containing the different layers
  const layers = [
    // Masking layer
  new GeoJsonLayer({
    id: 'country-vector',
    operation: 'mask',
    data: "geojson.json", // <-- any custom geometry
  })
  ...
  ...

  // Heatmap Tiles layer
  new TileLayer({
      id: 'heatmap-tiles',
      maskId: 'country-vector', // <-- same as mask id
    extensions: [new MaskExtension()],  // <-- enable mask extension
  ...
  })
  ]
  • রুট বরাবর: এয়ার কোয়ালিটি TileLayer-এর উপরে মাস্ক তৈরি করতে deck.gl-এর সাথে TripsLayer ব্যবহার করুন

ট্রিপের উপর এয়ার কোয়ালিটি হিটম্যাপ টাইল

alt_text

API অনুরোধ ও খরচ ম্যানেজ করা

ব্রাউজারের ডিফল্ট অ্যাকশন সাধারণত লোড করা সব টাইল লোকাল স্টোরেজে (একই সেশনের মধ্যে) ক্যাশে করে রাখা হলেও, আপনি আরও অপ্টিমাইজ করতে পারবেন:

  • লোডিং এরিয়া সীমাবদ্ধ করুন: একটি বাউন্ডিং বক্স (লাল রঙের) তৈরি করুন এবং এটি লেয়ারে অ্যাসাইন করুন, যেকোনও জুম লেভেলে শুধুমাত্র বাউন্ডিং বক্স কভার করা হিটম্যাপ টাইল (নীল রঙের) লোড হবে

বাউন্ডিং বক্স (লাল রঙে), হিটম্যাপ টাইল (নীল রঙে)

alt_text 

 // Heatmap Tile layer
 new TileLayer({
    id: 'heatmap-tiles',
    extent: [minX, minY, maxX, maxY] // bounding box: southwest lat, southwest lng, northeast lat, northeast lng
    ...
 })
  • যেকোনও জুম লেভেলে সম্পূর্ণ ভিউপোর্ট কভার করার জন্য ভিজ্যুয়াল ডিসপ্লে টাইল সাইজ সেট করুন; সাজেস্ট করা সাইজ: ২৫৬ থেকে ১০২৪-এর মধ্যে।

    গুরুত্বপূর্ণ: API টাইল ২৫৬x২৫৬ রেজোলিউশনেই থাকে, তবে ভিজ্যুয়াল ডিসপ্লে অ্যাডজাস্টমেন্টের মাধ্যমে আপনি সম্পূর্ণ ম্যাপ ভিউপোর্ট কভার করার জন্য টাইল অনুরোধের সংখ্যা বাড়াতে/কমাতে পারবেন

    (Google Map-এর minZoom এবং maxZoom-এর সাথে এটি কাজ করছে কিনা তা নিশ্চিত করুন, যেমন: tilesize:1024 জুম 0 বা 1-এ টাইল লোড হবে না)।

২৫৬x২৫৬ পিক্সেল বনাম ৫১২x৫১২ পিক্সেল টাইল সহ ভিউপোর্ট

alt_text alt_text 



    // Heatmap Tile layer
    new TileLayer({
        id: 'heatmap-tiles',
        tilesize:256, // <-- change to 512 for instance
        ...
    })

পিক্সেল ভ্যালু পড়া

কালার স্কেলে সংশ্লিষ্ট ভ্যালু দেখাতে

আপনি Luma.gl লাইব্রেরি এবং এর readPixelsToArray পদ্ধতিটি deck.gl লেয়ারে প্রপ হিসেবে অ্যাসাইন করা onClick ইভেন্টে ব্যবহার করতে পারবেন।

পিক্সেল ভ্যালু: rgba(128,0,0,255)

alt_text

কম alt_text বেশি 

  // Uint8Array pixel sample
  import { readPixelsToArray } from "@luma.gl/core";
  ...

  // assign on the TileLayer
  new TileLayer({
      id: 'heatmap-tiles',
  ...
    onClick: ({
    bitmap,
    layer
  }) => {
    if (bitmap) {
      const pixel = readPixelsToArray(layer.props.image, {
        sourceX: bitmap.pixel[0],
        sourceY: bitmap.pixel[1],
        sourceWidth: 1,
        sourceHeight: 1
      });
      // console.log("color picked:"+ pixel);
    }
  }
  })

উপসংহার

আপনি কীভাবে এয়ার কোয়ালিটি এবং পলেন হিটম্যাপ টাইল API এন্ডপয়েন্ট হতে পারে তা আবিষ্কার করেছেন:

  • ওয়েবে Google Map-এ লোড করা হয়েছে এবং ব্যবহারের শর্তাবলী মেনে চলা হয়েছে
  • আপনার ব্যবহারের কেস অনুযায়ী অপ্টিমাইজ করা
  • টাইলসের মান পড়ুন

পরবর্তী অ্যাকশন

আরও পড়ার জন্য সাজেস্ট করা বই:

অবদানকারী

প্রধান লেখক:

টমাস অ্যাঙ্গলার্ট | Google Maps Platform সলিউশন ইঞ্জিনিয়ার