rendering pins on map based on firestore document

src/routes/+page.svelte

@@ -3,6 +3,8 @@
     import MapView from '$lib/components/MapView.svelte';
 
     import { getNearbyMessages } from '$lib/firebase/messages.js';
+    import { messagesStore } from '$lib/stores/messagesStore.js';
+
 
     let lat = $state();
     let lng = $state();
@@ -22,6 +24,14 @@
                 error = "Location access denied. Please enable location to use Overheard.";
             }
         );
+        // populate the messages store 
+        navigator.geolocation.getCurrentPosition(
+            async (position) => {
+                const messages = await getNearbyMessages(position.coords.latitude, position.coords.longitude);
+                messagesStore.set(messages);
+                console.log('messages loaded:', $messagesStore);
+            }
+        );
     });