একটি ওয়েব পৃষ্ঠায় হিটম্যাপ টাইলস এম্বেড করুন

এই টিউটোরিয়ালটি আপনাকে দেখায় কিভাবে HTML, CSS এবং Javascript ব্যবহার করে একটি ওয়েব পেজে Pollen API হিটম্যাপ টাইলস প্রদর্শন করতে হয়। এই টিউটোরিয়ালটি ব্যবহার করে আপনি যে মানচিত্রটি তৈরি করবেন তা এখানে:

এবার শুরু করা যাক

পরাগ এপিআই হিটম্যাপ টাইলস সহ একটি ওয়েব পৃষ্ঠা তৈরি করার জন্য আমরা এই পদক্ষেপগুলি কভার করব:

  1. একটি API কী পান
  2. HTML ব্যবহার করে একটি ওয়েব পেজ তৈরি করুন
  3. CSS ব্যবহার করে শৈলী কনফিগার করুন
  4. জাভাস্ক্রিপ্ট ব্যবহার করে পরাগ API ডেটা আনুন

আপনার ওয়েব পৃষ্ঠা তৈরি করতে, আপনার একটি ওয়েব ব্রাউজার প্রয়োজন যা জাভাস্ক্রিপ্ট সমর্থন করে। সমর্থিত ব্রাউজারগুলির একটি সম্পূর্ণ তালিকার জন্য ব্রাউজার সমর্থন দেখুন।

ধাপ 1: একটি API কী পান

এই বিভাগটি ব্যাখ্যা করে যে কীভাবে আপনার নিজের API কী ব্যবহার করে পরাগ API-তে আপনার অ্যাপকে প্রমাণীকরণ করতে হয়।

একটি API কী পেতে এই পদক্ষেপগুলি অনুসরণ করুন:

  1. গুগল ক্লাউড কনসোলে যান।

  2. একটি প্রকল্প তৈরি করুন বা নির্বাচন করুন।

  3. API এবং যেকোনো সম্পর্কিত পরিষেবা সক্ষম করতে অবিরত ক্লিক করুন।

  4. শংসাপত্র পৃষ্ঠায়, একটি API কী পান এবং API কী সীমাবদ্ধতা সেট করুন৷

  5. কোটা চুরি রোধ করতে এবং আপনার API কী সুরক্ষিত করতে, API কী ব্যবহার করা দেখুন।

  6. বিলিং সক্ষম করুন। আরও তথ্যের জন্য ব্যবহার এবং বিলিং দেখুন।

আপনি এখন আপনার API কী ব্যবহার করার জন্য প্রস্তুত৷

ধাপ 2: HTML ব্যবহার করে একটি ওয়েব পেজ তৈরি করুন

এখানে একটি মৌলিক HTML ওয়েব পৃষ্ঠার কোড আছে:

<html>
  <head>
    <title>Pollen heatmaps around the world</title>
    <style>
      /* Configure CSS here. */
    </style>
  </head>
  <body>
    <!-- Add JavaScript functions and button containers here. -->
  </body>
</html>

আপনার ওয়েব পৃষ্ঠায় একটি মানচিত্র লোড করতে, Pollen API-এর জন্য বুটস্ট্র্যাপ লোডার ধারণকারী একটি script ট্যাগ যোগ করুন এবং আপনার API কী অন্তর্ভুক্ত করুন:

  <script
    src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer>
  </script>

ধাপ 3: CSS ব্যবহার করে শৈলী কনফিগার করুন

এরপর, আপনার ওয়েব পৃষ্ঠায় মানচিত্রের উপস্থিতি কনফিগার করতে CSS ব্যবহার করুন৷

  <style>
    /*
    * Always set the map height explicitly to define the size of the div element
    * that contains the map.
    */
    #map {
      height: 600px;
    }
    #container{
      position:absolute;
      display:inline-block;
      z-index:10;
      margin-left:50%;
      transform:translateX(-50%);
      bottom:40px;
    }
  </style>

আপনি বিভিন্ন পরাগ API ডেটা প্রদর্শন করে এমন বোতামগুলি কনফিগার করতে CSS ব্যবহার করতে পারেন ( TREE , GRASS , বা WEED ):

  <style>
    button{
    width:100px;
    height:34px; 
    /*top:50px;*/
    display:inline-block;
    position:relative;
    text-align:center;
    border:none;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.29);
    color:#FFF;
    font-weight:400;
    border-radius:4px;
    margin-left:4px;
    font-family:"Google Sans","Roboto","Arial";
    line-height:1em;
  }
    #tree{background:#009c1a}
    #grass{background:#22b600}
    #weed{background:#26cc00}
    button:active{background:#999999 !important;}
  </style>

বোতাম এবং মানচিত্রের জন্য কন্টেইনার তৈরি করতে একটি <div> উপাদান ব্যবহার করুন:

  <div id="container">
        <button type="button" id="tree">TREE</button>
        <button type="button" id="grass">GRASS</button>
        <button type="button" id="weed">WEED</button>
  </div>
  <div id="map"></div>

ধাপ 4: জাভাস্ক্রিপ্ট ব্যবহার করে পরাগ এপিআই ডেটা আনুন

পরাগ এপিআই ডেটা আনতে এবং একটি ইন্টারেক্টিভ মানচিত্রে প্রদর্শন করতে জাভাস্ক্রিপ্ট ব্যবহার করুন:

  function getNormalizedCoord(coord, zoom) {
    const y = coord.y;
    let x = coord.x;
    // Define the tile range in one direction. The range is dependent on zoom level:
    // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc.
    const tileRange = 1 << zoom;

    // don't repeat across y-axis (vertically)
    if (y < 0 || y >= tileRange) {
      return null;
    }

    // repeat across x-axis
    if (x < 0 || x >= tileRange) {
      x = ((x % tileRange) + tileRange) % tileRange;
    }
    return { x: x, y: y };
  }

  let pollen = "TREE_UPI"
  class PollenMapType {
    tileSize;
    alt = null;
    maxZoom = 16;
    minZoom = 3;
    name = null;
    projection = null;
    radius = 6378137;
    constructor(tileSize) {
      this.tileSize = tileSize;
    }

    getTile(coord, zoom, ownerDocument) {
      const img = ownerDocument.createElement("img");
      const mapType = pollen;
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      const x = coord.x;
      const y = coord.y;
      const key = "YOUR_API_KEY";
      img.style.opacity = 0.8;
      img.src = `https://pollen.googleapis.com/v1/mapTypes/${mapType}/heatmapTiles/${zoom}/${x}/${y}?key=${key}`;
      return img;
    }
    releaseTile(tile) {}
  }

অবশেষে, মানচিত্র শুরু করতে JavaScript ব্যবহার করুন এবং নির্বাচিত বোতামগুলির উপর ভিত্তি করে পরাগ API ডেটা প্রদর্শন করুন:

  function initMap() {
    const myLatLng = { lat: 40.3769, lng: -80.5417 };
    const map = new google.maps.Map(document.getElementById("map"), {
      mapId: "ffcdd6091fa9fb03",
      zoom: 0,
      center: myLatLng,
      maxZoom: 16,
      minZoom: 3,
      restriction: {
        latLngBounds: {north: 80, south: -80, west: -180, east: 180},
        strictBounds: true,
      },
      streetViewControl: false,
    });
    const pollenMapType = new PollenMapType(new google.maps.Size(256, 256));
    map.overlayMapTypes.insertAt(0, pollenMapType);
    
    document.querySelector("#tree").addEventListener("click", function(){
        pollen ="TREE_UPI"
        map.overlayMapTypes.removeAt(0);
        const pollenMapType = new PollenMapType(new google.maps.Size(256, 256));
        map.overlayMapTypes.insertAt(0, pollenMapType);
    })
    document.querySelector("#grass").addEventListener("click", function(){
        pollen ="GRASS_UPI"
        map.overlayMapTypes.removeAt(0);
        const pollenMapType = new PollenMapType(new google.maps.Size(256, 256));
        map.overlayMapTypes.insertAt(0, pollenMapType);
    })
      document.querySelector("#weed").addEventListener("click", function(){
        pollen ="WEED_UPI"
        map.overlayMapTypes.removeAt(0);
        const pollenMapType = new PollenMapType(new google.maps.Size(256, 256));
        map.overlayMapTypes.insertAt(0, pollenMapType);
    })
  }