הטמעת משבצות של מפת חום בדף אינטרנט

במדריך הזה מוסבר איך להציג משבצות של מפת חום של Pollen API בדף אינטרנט באמצעות HTML,‏ CSS ו-JavaScript. זו המפה שתיצרו באמצעות המדריך הזה:

שנתחיל?

אלה השלבים ליצירת דף אינטרנט עם משבצות של מפת חום באמצעות Pollen API:

  1. קבלת מפתח API
  2. יצירת דף אינטרנט באמצעות HTML
  3. הגדרת סגנונות באמצעות CSS
  4. אחזור נתונים מ-Pollen API באמצעות JavaScript

כדי ליצור דף אינטרנט, צריך דפדפן אינטרנט שתומך ב-JavaScript. רשימה מלאה של הדפדפנים הנתמכים מופיעה במאמר בנושא תמיכה בדפדפנים.

שלב 1: קבלת מפתח API

בקטע הזה מוסבר איך לאמת את האפליקציה שלכם ב-Pollen API באמצעות מפתח API משלכם.

כדי לקבל מפתח API:

  1. נכנסים ל מסוף Google Cloud.

  2. יוצרים או בוחרים פרויקט.

  3. לוחצים על Continue כדי להפעיל את ה-API ואת כל השירותים שקשורים אליו.

  4. בדף Credentials, מקבלים מפתח 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>

כדי לטעון מפה בדף אינטרנט, מוסיפים תג script שמכיל את bootstrap loader של Pollen API וכולל את מפתח ה-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>

אפשר גם להשתמש ב-CSS כדי להגדיר לחצנים שמציגים נתונים שונים מ-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>

שלב 4: אחזור נתונים מ-Pollen API באמצעות JavaScript

משתמשים ב-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);
    })
  }