feat: add descriptions for imagery quality (#12)

* feat: add descriptions for imagery quality

* add more descriptions

* update packages

* npm run format

package.json

@@ -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"
 }

src/routes/+page.svelte

@@ -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';

src/routes/layer.ts

@@ -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,

src/routes/sections/DataLayersSection.svelte

@@ -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;
@@ -121,6 +122,8 @@
         return;
       }
 
+      imageryQuality = dataLayersResponse.imageryQuality;
+
       try {
         layer = await getLayer(layerId, dataLayersResponse, googleMapsApiKey);
       } catch (e) {
@@ -225,7 +228,10 @@
       <Dropdown
         bind:value={layerId}
         options={dataLayerOptions}
-        onChange={async () => showDataLayer(true)}
+        onChange={async () => {
+          layer = undefined;
+          showDataLayer();
+        }}
       />
 
       {#if layerId == 'none'}
@@ -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()} />
 

src/routes/solar.ts

@@ -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,
@@ -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.
@@ -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();
@@ -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.
@@ -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();

svelte.config.js

@@ -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,

tsconfig.json

@@ -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