-
Notifications
You must be signed in to change notification settings - Fork 823
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
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Large diffs are not rendered by default.
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 %} |
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"; | ||
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 {}; |
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] */ |
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 }}" | ||
} |
There was a problem hiding this comment.
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.