کاشی های نقشه حرارتی را در یک صفحه وب جاسازی کنید

این آموزش به شما نشان می دهد که چگونه کاشی های نقشه حرارتی Pollen API را در یک صفحه وب با استفاده از HTML، CSS و جاوا اسکریپت نمایش دهید. در اینجا نقشه ای است که با استفاده از این آموزش ایجاد خواهید کرد:

شروع کنید

این مراحلی است که برای ایجاد یک صفحه وب با کاشی های نقشه حرارتی Pollen API پوشش خواهیم داد:

  1. یک کلید API دریافت کنید
  2. یک صفحه وب با استفاده از HTML ایجاد کنید
  3. پیکربندی سبک ها با استفاده از CSS
  4. داده های Pollen API را با استفاده از جاوا اسکریپت واکشی کنید

برای ایجاد صفحه وب خود، به یک مرورگر وب نیاز دارید که از جاوا اسکریپت پشتیبانی کند. برای لیست کامل مرورگرهای پشتیبانی شده به پشتیبانی مرورگر مراجعه کنید.

مرحله 1: یک کلید API دریافت کنید

این بخش نحوه احراز هویت برنامه خود را با استفاده از کلید API خود در Pollen API توضیح می دهد.

برای دریافت کلید API مراحل زیر را دنبال کنید:

  1. به Google Cloud Console بروید.

  2. ایجاد یا انتخاب یک پروژه

  3. برای فعال کردن API و هر سرویس مرتبط، روی Continue کلیک کنید.

  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 حاوی بارکننده بوت استرپ برای 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 برای پیکربندی دکمه‌هایی استفاده کنید که داده‌های مختلف API 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 API را با استفاده از جاوا اسکریپت واکشی کنید

از جاوا اسکریپت برای واکشی داده های 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) {}
  }

در نهایت، از جاوا اسکریپت برای مقداردهی اولیه نقشه و نمایش داده های 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);
    })
  }