Integrate weather API for real-time weather data

src/routes/+page.svelte

@@ -24,8 +24,10 @@
 
   import SearchBar from './components/SearchBar.svelte';
   import Sections from './sections/Sections.svelte';
+  import { fetchWeatherData } from './weather';
 
   const googleMapsApiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
+  const weatherApiKey = import.meta.env.VITE_WEATHER_API_KEY;
   const defaultPlace = {
     name: 'Rinconada Library',
     address: '1213 Newell Rd, Palo Alto, CA 94303',
@@ -39,6 +41,7 @@
   let geometryLibrary: google.maps.GeometryLibrary;
   let mapsLibrary: google.maps.MapsLibrary;
   let placesLibrary: google.maps.PlacesLibrary;
+  let weatherData: any;
   onMount(async () => {
     // Load the Google Maps libraries.
     const loader = new Loader({ apiKey: googleMapsApiKey });
@@ -71,6 +74,9 @@
       streetViewControl: false,
       zoomControl: false,
     });
+
+    // Fetch and display weather data
+    weatherData = await fetchWeatherData(location.lat(), location.lng(), weatherApiKey);
   });
 </script>
 
@@ -109,6 +115,15 @@
         <Sections {location} {map} {geometryLibrary} {googleMapsApiKey} />
       {/if}
 
+      {#if weatherData}
+        <div class="p-4 surface-variant outline-text rounded-lg space-y-3">
+          <p><b>Weather Conditions:</b></p>
+          <p>Temperature: {weatherData.temperature}°C</p>
+          <p>Humidity: {weatherData.humidity}%</p>
+          <p>Cloud Cover: {weatherData.cloudCover}%</p>
+        </div>
+      {/if}
+
       <div class="grow" />
 
       <div class="flex flex-col items-center w-full">

src/routes/weather.ts

@@ -0,0 +1,42 @@
+/*
+ Copyright 2023 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ 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
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import axios from 'axios';
+
+const weatherApiUrl = 'https://api.openweathermap.org/data/2.5/weather';
+
+export async function fetchWeatherData(lat: number, lon: number, apiKey: string) {
+  try {
+    const response = await axios.get(weatherApiUrl, {
+      params: {
+        lat: lat,
+        lon: lon,
+        appid: apiKey,
+        units: 'metric',
+      },
+    });
+
+    const data = response.data;
+    return {
+      temperature: data.main.temp,
+      humidity: data.main.humidity,
+      cloudCover: data.clouds.all,
+    };
+  } catch (error) {
+    console.error('Error fetching weather data:', error);
+    throw error;
+  }
+}