feat: Adds tree pollen heatmap example.

Change-Id: Ic28cc873ffc1616fa9cd6ded887f42d0a38d85ef
googlemaps · Sep 7, 2023 · ecf387e · ecf387e
1 parent ff6d3be
commit ecf387e
Show file tree

Hide file tree

Showing 17 changed files with 163 additions and 34 deletions.
diff --git a/dist/chunk-RIWRJ6PT.js.LEGAL.txt b/dist/chunk-RIWRJ6PT.js.LEGAL.txt
diff --git a/dist/index.html b/dist/index.html
@@ -5589,6 +5589,35 @@ <h4 class="card-header">threejs-overlay-simple</h4>
           </div>
         </div>
 
+        <div class="card">
+          <h4 class="card-header">tree-pollen</h4>
+          <div class="card-footer">
+            <button
+              class="button"
+              onclick="setIframe('./samples/playground.html?sample=tree-pollen')"
+            >
+              Playground
+            </button>
+            <button
+              class="button"
+              onclick="setIframe('./samples/tree-pollen/iframe/index.html')"
+            >
+              Iframe
+            </button>
+            <button
+              class="button"
+              onclick="setIframe('./samples/tree-pollen/app/dist/index.html')"
+            >
+              App
+            </button>
+            <a
+              class="button"
+              href="https://github.com/googlemaps/js-samples/tree/main/samples/tree-pollen"
+              >Code</a
+            >
+          </div>
+        </div>
+
         <div class="card">
           <h4 class="card-header">user-editable-shapes</h4>
           <div class="card-footer">

diff --git a/dist/samples/advanced-markers-accessibility/docs/index.js b/dist/samples/advanced-markers-accessibility/docs/index.js
diff --git a/dist/samples/advanced-markers-accessibility/jsfiddle/demo.js b/dist/samples/advanced-markers-accessibility/jsfiddle/demo.js
diff --git a/dist/samples/advanced-markers-altitude/docs/index.js b/dist/samples/advanced-markers-altitude/docs/index.js
diff --git a/dist/samples/advanced-markers-altitude/jsfiddle/demo.js b/dist/samples/advanced-markers-altitude/jsfiddle/demo.js
diff --git a/dist/samples/advanced-markers-basic-style/docs/index.js b/dist/samples/advanced-markers-basic-style/docs/index.js
diff --git a/dist/samples/advanced-markers-basic-style/jsfiddle/demo.js b/dist/samples/advanced-markers-basic-style/jsfiddle/demo.js
diff --git a/dist/samples/advanced-markers-graphics/docs/index.js b/dist/samples/advanced-markers-graphics/docs/index.js
diff --git a/dist/samples/advanced-markers-graphics/jsfiddle/demo.js b/dist/samples/advanced-markers-graphics/jsfiddle/demo.js
diff --git a/dist/samples/marker-clustering/docs/index.js b/dist/samples/marker-clustering/docs/index.js
diff --git a/dist/samples/marker-clustering/jsfiddle/demo.js b/dist/samples/marker-clustering/jsfiddle/demo.js
diff --git a/dist/types/google-maps/index.d.ts b/dist/types/google-maps/index.d.ts
diff --git a/samples/tree-pollen/index.njk b/samples/tree-pollen/index.njk
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<!--
+ @license
+ Copyright 2019 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+{% extends '../../src/_includes/layout.njk'%} {% block html %}
+<div id="map"></div>
+{% endblock %}
diff --git a/samples/tree-pollen/index.ts b/samples/tree-pollen/index.ts
@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// [START maps_tree_pollen]
+function getNormalizedCoord(coord, zoom) {
+    const y = coord.y;
+    let x = coord.x;
+    // tile range in one direction 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 };
+  }
+
+  class AirQualityMapType {
+    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 = "TREE_UPI";
+      const normalizedCoord = getNormalizedCoord(coord, zoom);
+
+      const x = coord.x;
+      const y = coord.y;
+      const key = "AIzaSyD4jWorF4eIMiBE3oZnd73Y7kOVO9q6gBE";
+      img.style.opacity = 0.8;
+      img.src = `https://pollen.googleapis.com/v1/mapTypes/${mapType}/heatmapTiles/${zoom}/${x}/${y}?key=${key}`;
+      return img;
+    }
+    releaseTile(tile) {}
+  }
+
+  async function initMap(): Promise<void> {
+    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
+    const myLatLng = { lat: 40.3769, lng: -80.5417 };
+    const map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
+      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 aqMapType = new AirQualityMapType(new google.maps.Size(256, 256));
+    map.overlayMapTypes.insertAt(0, aqMapType);
+
+  }
+
+initMap();
+// [END maps_tree_pollen]
+export {};
diff --git a/samples/tree-pollen/style.scss b/samples/tree-pollen/style.scss
@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+ @use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
+
+ /* [START maps_tree_pollen] */
+ @include meta.load-css("../../shared/scss/default.scss");
+
+ /* [END maps_tree_pollen] */
diff --git a/samples/tree-pollen/tree-pollen.json b/samples/tree-pollen/tree-pollen.json
@@ -0,0 +1,13 @@
+{
+    "title": "Tree Pollen",
+    "version": "beta",
+    "dynamic_import": "true",
+    "tag": "tree_pollen",
+    "name": "tree-pollen",
+    "pagination": {
+      "data": "mode",
+      "size": 1,
+      "alias": "mode"
+    },
+    "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  }