firestore and storage rules

src/lib/Firebase/messages.js

@@ -7,6 +7,7 @@ import ngeohash from 'ngeohash';
 export async function getNearbyMessages(lat, lng) {
     const prefix = getQueryPrefix(lat, lng);
 
+    // filter by the geohash
     const q = query(
         collection(db, 'messages'),
         where('geohash', '>=', prefix),
@@ -30,7 +31,7 @@ export async function getNearbyMessages(lat, lng) {
     return active;
 }
 
-
+// update the echo counter
 export async function echoMessage(messageId) {
     const ref = doc(db, 'messages', messageId);
     await updateDoc(ref, {
@@ -39,6 +40,7 @@ export async function echoMessage(messageId) {
     });
 }
 
+// adding the message location 
 export async function addMessage(lat, lng, text, imageUrl = ''){
     const geohash = ngeohash.encode(lat, lng, 6);
 
@@ -55,6 +57,7 @@ export async function addMessage(lat, lng, text, imageUrl = ''){
     });
 }
 
+// session ID (temporary)
 function getSessionId() {
     let id = localStorage.getItem('overheard_session');
     if (!id) {

src/lib/Firebase/storage.js

@@ -1,6 +1,7 @@
 import { ref, uploadBytes, getDownloadURL } from 'firebase/storage'
 import { storage } from './config.js';
 
+
 export async function uploadImage(file) {
     //create unique file name and stores them in one folder in firebase
     const filename = `messages/${Date.now()}_${file.name}`;

src/lib/components/MapView.Svelte

@@ -8,15 +8,16 @@
     // 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 { lat, lng } = $props();
-
+s
     let mapDiv;
+    let map = $state(null);
 
     let markers = []; // keep track of pins on map
     let userMarker;
     let AdvancedMarkerElement;
 
     /** Jisu Legacy - 내 위치 마커 (메시지 핀과 구분되는 파란 점) */
-    function addUserLocationMarker(map, centerLat, centerLng) {
+    function addUserLocationMarker(centerLat, centerLng) {
         const dot = document.createElement('div');
         dot.style.cssText = 'width:20px;height:20px;border-radius:50%;background:#4285F4;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.3)';
         userMarker = new AdvancedMarkerElement({
@@ -41,7 +42,7 @@
         const { Map } = await importLibrary('maps');
         ({ AdvancedMarkerElement } = await importLibrary('marker'));
 
-        mapDiv = new Map(mapDiv, {
+        map = new Map(mapDiv, {
             center: { lat: centerLat, lng: centerLng },
             zoom: 15,
             disableDefaultUI: true,
@@ -49,7 +50,7 @@
             mapId: 'DEMO_MAP_ID'
         });
 
-        addUserLocationMarker(mapDiv, centerLat, centerLng);
+        addUserLocationMarker(centerLat, centerLng);
     });
 
     // function to render pins
@@ -61,7 +62,7 @@
         messages.forEach(message => {
             const marker = new AdvancedMarkerElement({
                 position: { lat: message.lat, lng: message.lng },
-                map: mapDiv,
+                map,
                 title: message.text
             });
 
@@ -75,7 +76,7 @@
 
     // this is a reactive statement so anytime the store changes it updates
     $effect(() => {
-        if (mapDiv && $messagesStore.length > 0 ){ // if they both exist
+        if (map && $messagesStore.length > 0 ){ // if they both exist
             renderPins($messagesStore); // we put pins on the map
         }
     })