Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Adds tree pollen heatmap example. #1592

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file removed dist/chunk-RIWRJ6PT.js.LEGAL.txt
Empty file.
29 changes: 29 additions & 0 deletions dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 2 additions & 3 deletions dist/samples/advanced-markers-accessibility/docs/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions dist/samples/advanced-markers-accessibility/jsfiddle/demo.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions dist/samples/advanced-markers-altitude/docs/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions dist/samples/advanced-markers-altitude/jsfiddle/demo.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions dist/samples/advanced-markers-basic-style/docs/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions dist/samples/advanced-markers-basic-style/jsfiddle/demo.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions dist/samples/advanced-markers-graphics/docs/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions dist/samples/advanced-markers-graphics/jsfiddle/demo.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions dist/samples/marker-clustering/docs/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions dist/samples/marker-clustering/jsfiddle/demo.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions dist/types/google-maps/index.d.ts

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions samples/tree-pollen/index.njk
Original file line number Diff line number Diff line change
@@ -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 %}
76 changes: 76 additions & 0 deletions samples/tree-pollen/index.ts
Original file line number Diff line number Diff line change
@@ -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";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just want to point out to whoever reviews this that there is an API key in here.

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 {};
12 changes: 12 additions & 0 deletions samples/tree-pollen/style.scss
Original file line number Diff line number Diff line change
@@ -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] */
13 changes: 13 additions & 0 deletions samples/tree-pollen/tree-pollen.json
Original file line number Diff line number Diff line change
@@ -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 }}"
}
Loading