किसी वेब पेज में हीटमैप टाइल एम्बेड करना

इस ट्यूटोरियल में, एचटीएमएल, सीएसएस, और JavaScript का इस्तेमाल करके, वेब पेज में Pollen API की हीटमैप टाइलें दिखाने का तरीका बताया गया है. इस ट्यूटोरियल का इस्तेमाल करके, यह मैप बनाया जाएगा:

अपनी प्रोफ़ाइल बनाना शुरू करें

हम Pollen API के हीटमैप टाइल का इस्तेमाल करके वेब पेज बनाने के लिए, यह तरीका अपनाएंगे:

  1. एपीआई पासकोड पाना
  2. एचटीएमएल का इस्तेमाल करके वेब पेज बनाना
  3. सीएसएस का इस्तेमाल करके स्टाइल कॉन्फ़िगर करना
  4. JavaScript का इस्तेमाल करके Pollen API का डेटा फ़ेच करना

वेब पेज बनाने के लिए, आपको ऐसे वेब ब्राउज़र की ज़रूरत होगी जो JavaScript का समर्थन करता हो. इस सुविधा के साथ काम करने वाले ब्राउज़र की पूरी सूची देखने के लिए, ब्राउज़र से जुड़ी ज़रूरी जानकारी देखें.

पहला चरण: एपीआई पासकोड पाना

इस सेक्शन में, अपने एपीआई पासकोड का इस्तेमाल करके, Pollen API के साथ अपने ऐप्लिकेशन की पुष्टि करने का तरीका बताया गया है.

एपीआई कुंजी पाने के लिए, यह तरीका अपनाएं:

  1. Google Cloud Console पर जाएं.

  2. कोई प्रोजेक्ट बनाएं या चुनें.

  3. एपीआई और उससे जुड़ी सेवाओं को चालू करने के लिए, जारी रखें पर क्लिक करें.

  4. क्रेडेंशियल पेज पर जाकर, एपीआई पासकोड पाएं और एपीआई पासकोड से जुड़ी पाबंदियां सेट करें.

  5. कोटा चोरी को रोकने और अपनी एपीआई पासकोड को सुरक्षित रखने के लिए, एपीआई पासकोड का इस्तेमाल करना लेख पढ़ें.

  6. बिलिंग की सुविधा चालू करें. ज़्यादा जानकारी के लिए, इस्तेमाल और बिलिंग देखें.

अब एपीआई कुंजी का इस्तेमाल किया जा सकता है.

दूसरा चरण: एचटीएमएल का इस्तेमाल करके वेब पेज बनाना

यहां एक सामान्य एचटीएमएल वेब पेज का कोड दिया गया है:

<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>

अपने वेब पेज पर मैप लोड करने के लिए, script टैग जोड़ें. इसमें Pollen API के लिए बूटस्ट्रैप लोडर शामिल होना चाहिए. साथ ही, इसमें अपनी एपीआई कुंजी भी शामिल करें:

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

तीसरा चरण: सीएसएस का इस्तेमाल करके स्टाइल कॉन्फ़िगर करना

इसके बाद, सीएसएस का इस्तेमाल करके, अपने वेब पेज पर मैप के दिखने के तरीके को कॉन्फ़िगर करें.

  <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>

सीएसएस का इस्तेमाल करके, ऐसे बटन भी कॉन्फ़िगर किए जा सकते हैं जो अलग-अलग Pollen API डेटा (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>

चौथा चरण: JavaScript का इस्तेमाल करके, Pollen API का डेटा फ़ेच करना

JavaScript का इस्तेमाल करके, Pollen API का डेटा फ़ेच करें और उसे इंटरैक्टिव मैप पर दिखाएं:

  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 का इस्तेमाल करके मैप को शुरू करें और चुने गए बटन के आधार पर Pollen 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);
    })
  }