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

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

שנתחיל?

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

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

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

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

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

כך מקבלים מפתח API:

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

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

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

  4. בדף Credentials, מקבלים API key ומגדירים את ההגבלות על מפתחות ה-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 שמכיל את ה-bootraper של ה-Polen 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: שליפת נתונים של ממשק 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);
    })
  }