تضمين مربّعات خريطة التمثيل اللوني في صفحة ويب

يوضّح لك هذا البرنامج التعليمي كيفية عرض مربّعات خريطة الكثافة الخاصة بواجهة برمجة التطبيقات Pollen API في صفحة ويب باستخدام HTML وCSS وJavaScript. في ما يلي الخريطة التي ستنشئها باستخدام هذا البرنامج التعليمي:

البدء

في ما يلي الخطوات التي سنتناولها لإنشاء صفحة ويب تتضمّن مربّعات خريطة حرارية باستخدام واجهة برمجة التطبيقات Pollen API:

  1. الحصول على مفتاح واجهة برمجة التطبيقات
  2. إنشاء صفحة ويب باستخدام HTML
  3. إعداد الأنماط باستخدام CSS
  4. استرداد بيانات Pollen API باستخدام JavaScript

لإنشاء صفحة الويب، ستحتاج إلى متصفّح ويب متوافق مع JavaScript. يمكنك الاطّلاع على المتصفّحات المتوافقة للحصول على قائمة كاملة بالمتصفّحات المتوافقة.

الخطوة 1: الحصول على مفتاح واجهة برمجة التطبيقات

يوضّح هذا القسم كيفية مصادقة تطبيقك على Pollen API باستخدام مفتاح واجهة برمجة التطبيقات الخاص بك.

اتّبِع الخطوات التالية للحصول على مفتاح واجهة برمجة التطبيقات:

  1. انتقِل إلى Google Cloud Console.

  2. إنشاء مشروع أو اختياره

  3. انقر على متابعة لتفعيل واجهة برمجة التطبيقات وأي خدمات ذات صلة.

  4. في صفحة بيانات الاعتماد، احصل على مفتاح واجهة برمجة التطبيقات واضبط القيود المفروضة على مفتاح واجهة برمجة التطبيقات.

  5. لمنع سرقة الحصة وتأمين مفتاح واجهة برمجة التطبيقات، يمكنك الاطّلاع على استخدام مفاتيح واجهة برمجة التطبيقات.

  6. فعِّل الفوترة. يمكنك الاطّلاع على الاستخدام والفوترة للحصول على مزيد من المعلومات.

أنت الآن جاهز لاستخدام مفتاح واجهة برمجة التطبيقات.

الخطوة 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 لواجهة برمجة التطبيقات Pollen 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 باستخدام 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);
    })
  }