geohash and message query stuff

package.json

@@ -17,6 +17,8 @@
 		"vite": "^8.0.7"
 	},
 	"dependencies": {
-		"@googlemaps/js-api-loader": "^2.1.0"
+		"@googlemaps/js-api-loader": "^2.1.0",
+		"firebase": "^12.14.0",
+		"ngeohash": "^0.6.3"
 	}
 }

src/lib/Firebase/messages.js

@@ -0,0 +1,16 @@
+import { collection, query, where, getDocs } from 'firebase/firestore'; // tools for building and running db queries
+import { db } from './config'; // database connection
+import { getQueryPrefix } from '$lib/utils/geohash'; // convert coordinates into geohash string 
+
+export async function getNearbyMessages(lat, lng) {
+    const prefix = getQueryPrefix(lat, lng);
+
+    const q = query(
+        collection(db, 'messages'),
+        where('geohash', '>=', prefix),
+        where('geohash', '<', prefix + 'z')
+    );
+
+    const snapshot = await getDocs(q);
+    return snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+}

src/lib/components/MapView.Svelte

@@ -5,21 +5,24 @@
     // export let latitude;
     // export let longitude;
     // ^ this didn't work for some reason, so instead we get the props like this: (based on internet research this is the fix)
-    let { latitude, longitude } = $props();
+    let { lat, lng } = $props();
 
     let mapDiv; // reference ot the map <div> below
 
     onMount (async () => {
+        const centerLat = Number(lat);
+        const centerLng = Number(lng);
+
         const { setOptions, importLibrary } = await import('@googlemaps/js-api-loader');
         setOptions({
-            apiKey: env.PUBLIC_MAPS_KEY,
+            key: env.PUBLIC_MAPS_KEY,
             version: 'weekly',
         });
 
         const { Map } = await importLibrary('maps');
 
         new Map(mapDiv, {
-            center: { lat: latitude, lng: longitude },
+            center: { lat: centerLat, lng: centerLng },
             zoom: 15,
             disableDefaultUI: true,
             gestureHandling: 'greedy'

src/lib/utils/geohash.js

@@ -0,0 +1,15 @@
+import ngeohash from 'ngeohash'; // library that does the geohasing encoding/decoding yippee 
+
+// encodes the latitude/longitude pair to a 6 character string geohash (~1.2km radius)
+export function encode(lat, lng) {
+    return ngeohash.encode(lat, lng, 6);
+}
+
+// encodes a lat/lng pair to a 4 character string geohash (~40km radius) used as a Firestore query prefix
+// basically like looking for all geohashes that start with this 4 characters
+// it will include all geohashes in a ~40km radius of the given lat/lng pair
+
+// maybe we lessen the radius later but for now is good for testing
+export function getQueryPrefix(lat, lng) {
+    return ngeohash.encode(lat, lng, 4);
+}

src/routes/+page.svelte

@@ -2,8 +2,10 @@
     import { onMount } from 'svelte';
     import MapView from '$lib/components/MapView.svelte';
 
-    let latitude = $state();
-    let longitude = $state();
+    import { getNearbyMessages } from '$lib/firebase/messages.js';
+
+    let lat = $state();
+    let lng = $state();
     let error = $state();
 
     onMount(() => {
@@ -13,20 +15,22 @@
         }
         navigator.geolocation.getCurrentPosition(
             (position) => {
-                latitude = position.coords.latitude;
-                longitude = position.coords.longitude;
+                lat = position.coords.latitude;
+                lng = position.coords.longitude;
             },
             () => {
                 error = "Location access denied. Please enable location to use Overheard.";
             }
         );
     });
+
+    
 </script>
 
 {#if error}
     <p class="error">{error}</p>
-{:else if latitude && longitude}
-    <MapView {latitude} {longitude} />
+{:else if lat && lng}
+    <MapView {lat} {lng} />
 {:else}
     <p class="loading">Looking for you...</p>
 {/if}