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.

Sign up for GitHub

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: add descriptions for imagery quality #12

Merged
merged 6 commits into from
Mar 28, 2024
Merged

feat: add descriptions for imagery quality #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cd95789
feat: add descriptions for imagery quality
davidcavazos Jan 30, 2024
522b38c
add more descriptions
davidcavazos Mar 28, 2024
8bfca38
Merge branch 'main' into imagery-quality
davidcavazos Mar 28, 2024
6c2e8fb
update packages
davidcavazos Mar 28, 2024
7003fac
Merge branch 'imagery-quality' of github.com:googlemaps-samples/js-so…
davidcavazos Mar 28, 2024
325b1ac
npm run format
davidcavazos Mar 28, 2024
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
1,055 changes: 536 additions & 519 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

54 changes: 27 additions & 27 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,42 +15,42 @@
"test:unit": "vitest run --coverage"
},
"dependencies": {
"dotenv": "^16.3.1"
"dotenv": "^16.4.5"
},
"devDependencies": {
"@fontsource/fira-mono": "^5.0.8",
"@googlemaps/js-api-loader": "^1.16.2",
"@material/web": "^1.1.1",
"@playwright/test": "^1.41.0",
"@sveltejs/adapter-auto": "^3.1.0",
"@sveltejs/adapter-node": "^3.0.1",
"@sveltejs/kit": "^2.3.5",
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"@fontsource/fira-mono": "^5.0.12",
"@googlemaps/js-api-loader": "^1.16.6",
"@material/web": "^1.4.0",
"@playwright/test": "^1.42.1",
"@sveltejs/adapter-auto": "^3.2.0",
"@sveltejs/adapter-node": "^3.0.3",
"@sveltejs/kit": "^2.5.4",
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"@types/cookie": "^0.6.0",
"@types/google.maps": "^3.54.10",
"@types/google.maps": "^3.55.5",
"@types/google.visualization": "^0.0.73",
"@types/proj4": "^2.5.5",
"@typescript-eslint/eslint-plugin": "^6.19.0",
"@typescript-eslint/parser": "^6.19.0",
"@vitest/coverage-v8": "^1.2.1",
"autoprefixer": "^10.4.17",
"eslint": "^8.56.0",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"@vitest/coverage-v8": "^1.4.0",
"autoprefixer": "^10.4.19",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
"geotiff": "^2.1.1",
"geotiff-geokeys-to-proj4": "^2024.1.14",
"geotiff": "^2.1.3",
"geotiff-geokeys-to-proj4": "^2024.3.9",
"google-charts": "^2.0.0",
"postcss": "^8.4.33",
"prettier": "^3.2.4",
"prettier-plugin-svelte": "^3.1.2",
"proj4": "^2.10.0",
"svelte": "^4.2.9",
"svelte-check": "^3.6.3",
"tailwindcss": "^3.4.1",
"postcss": "^8.4.38",
"prettier": "^3.2.5",
"prettier-plugin-svelte": "^3.2.2",
"proj4": "^2.11.0",
"svelte": "^4.2.12",
"svelte-check": "^3.6.8",
"tailwindcss": "^3.4.3",
"tslib": "^2.6.2",
"typescript": "^5.3.3",
"vite": "^5.0.11",
"vitest": "^1.2.1"
"typescript": "^5.4.3",
"vite": "^5.2.6",
"vitest": "^1.2.2"
},
"type": "module"
}
1 change: 1 addition & 0 deletions src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@

import * as GMAPILoader from '@googlemaps/js-api-loader';
const { Loader } = GMAPILoader;

import { onMount } from 'svelte';

import SearchBar from './components/SearchBar.svelte';
Expand Down
2 changes: 1 addition & 1 deletion src/routes/layer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

https://www.apache.org/licenses/LICENSE-2.0
https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
Expand Down
21 changes: 20 additions & 1 deletion src/routes/sections/DataLayersSection.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
let apiResponseDialog: MdDialog;
let layerId: LayerId | 'none' = 'monthlyFlux';
let layer: Layer | undefined;
let imageryQuality: 'HIGH' | 'MEDIUM' | 'LOW';

let playAnimation = true;
let tick = 0;
Expand Down Expand Up @@ -121,6 +122,8 @@
return;
}

imageryQuality = dataLayersResponse.imageryQuality;

try {
layer = await getLayer(layerId, dataLayersResponse, googleMapsApiKey);
} catch (e) {
Expand Down Expand Up @@ -225,7 +228,10 @@
<Dropdown
bind:value={layerId}
options={dataLayerOptions}
onChange={async () => showDataLayer(true)}
onChange={async () => {
layer = undefined;
showDataLayer();
}}
/>

{#if layerId == 'none'}
Expand All @@ -237,6 +243,19 @@
<Calendar bind:month bind:day onChange={async () => showDataLayer()} />
{/if}

<span class="outline-text label-medium">
{#if imageryQuality == 'HIGH'}
<p><b>Low altitude aerial imagery</b> available.</p>
<p>Imagery and DSM data were processed at <b>10 cm/pixel</b>.</p>
{:else if imageryQuality == 'MEDIUM'}
<p><b>AI augmented aerial imagery</b> available.</p>
<p>Imagery and DSM data were processed at <b>25 cm/pixel</b>.</p>
{:else if imageryQuality == 'LOW'}
<p><b>AI augmented aerial or satellite imagery</b> available.</p>
<p>Imagery and DSM data were processed at <b>50 cm/pixel</b>.</p>
{/if}
</span>

<InputBool bind:value={showPanels} label="Solar panels" />
<InputBool bind:value={showRoofOnly} label="Roof only" onChange={() => showDataLayer()} />

Expand Down
14 changes: 11 additions & 3 deletions src/routes/solar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

https://www.apache.org/licenses/LICENSE-2.0
https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
Expand Down Expand Up @@ -133,7 +133,7 @@ export type LayerId = 'mask' | 'dsm' | 'rgb' | 'annualFlux' | 'monthlyFlux' | 'h
// [START solar_api_building_insights]
/**
* Fetches the building insights information from the Solar API.
* https://developers.google.com/maps/documentation/solar/requests#make-building
* https://developers.google.com/maps/documentation/solar/building-insights
*
* @param {LatLng} location Point of interest as latitude longitude.
* @param {string} apiKey Google Cloud API key.
Expand All @@ -149,6 +149,7 @@ export async function findClosestBuilding(
};
console.log('GET buildingInsights\n', args);
const params = new URLSearchParams({ ...args, key: apiKey });
// https://developers.google.com/maps/documentation/solar/reference/rest/v1/buildingInsights/findClosest
return fetch(`https://solar.googleapis.com/v1/buildingInsights:findClosest?${params}`).then(
async (response) => {
const content = await response.json();
Expand All @@ -166,7 +167,7 @@ export async function findClosestBuilding(
// [START solar_api_data_layers]
/**
* Fetches the data layers information from the Solar API.
* https://developers.google.com/maps/documentation/solar/requests#make-data
* https://developers.google.com/maps/documentation/solar/data-layers
*
* @param {LatLng} location Point of interest as latitude longitude.
* @param {number} radiusMeters Radius of the data layer size in meters.
Expand All @@ -182,9 +183,16 @@ export async function getDataLayerUrls(
'location.latitude': location.latitude.toFixed(5),
'location.longitude': location.longitude.toFixed(5),
radius_meters: radiusMeters.toString(),
// The Solar API always returns the highest quality imagery available.
// By default the API asks for HIGH quality, which means that HIGH quality isn't available,
// but there is an existing MEDIUM or LOW quality, it won't return anything.
// Here we ask for *at least* LOW quality, but if there's a higher quality available,
// the Solar API will return us the highest quality available.
required_quality: 'LOW',
};
console.log('GET dataLayers\n', args);
const params = new URLSearchParams({ ...args, key: apiKey });
// https://developers.google.com/maps/documentation/solar/reference/rest/v1/dataLayers/get
return fetch(`https://solar.googleapis.com/v1/dataLayers:get?${params}`).then(
async (response) => {
const content = await response.json();
Expand Down
2 changes: 1 addition & 1 deletion svelte.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

https://www.apache.org/licenses/LICENSE-2.0
https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
Expand Down
4 changes: 2 additions & 2 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"types": ["google.visualization"],
},
"types": ["google.visualization"]
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
Expand Down
Loading