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

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

البدء

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

  1. الحصول على مفتاح واجهة برمجة التطبيقات
  2. إنشاء صفحة ويب باستخدام HTML
  3. ضبط الأنماط باستخدام CSS
  4. جلب بيانات واجهة برمجة تطبيقات Pollen باستخدام 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 تحتوي على برنامج الإقلاع في 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 (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 وعرضها على خريطة تفاعلية:

  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 بناءً على الأزرار المحددة:

  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);
    })
  }