ウェブページにヒートマップ タイルを埋め込む

このチュートリアルでは、HTML、CSS、JavaScript を使用して、Pollen API のヒートマップ タイルをウェブページに表示する方法について説明します。このチュートリアルで作成する地図は次のとおりです。

始める

Pollen API ヒートマップ タイルを使用してウェブページを作成する手順は次のとおりです。

  1. API キーを取得する
  2. HTML を使用してウェブページを作成する
  3. CSS を使用してスタイルを設定する
  4. JavaScript を使用して Pollen API データを取得する

ウェブページを作成するには、JavaScript 対応のウェブブラウザが必要です。サポートされているブラウザの一覧については、ブラウザのサポートをご覧ください。

ステップ 1: API キーを取得する

このセクションでは、独自の API キーを使用して、Pollen API に対してアプリを認証する方法について説明します。

次のステップに沿って、API キーを取得します。

  1. Google Cloud コンソールに移動します。

  2. プロジェクトを作成または選択します。

  3. [続行] をクリックして、API と関連サービスを有効にします。

  4. [認証情報] ページで 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>

ウェブページに地図を読み込むには、Pollen API のブートストラップ ローダを含む script タグと 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 を使用して、さまざまな Polen 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: JavaScript を使用して Pollen API データを取得する

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