From b7a88c6292c2e7bfffc3cdc4f7c7037922b3de25 Mon Sep 17 00:00:00 2001
From: Aubrey-Li <63608597+Aubrey-Li@users.noreply.github.com>
Date: Mon, 6 Sep 2021 15:11:28 -0400
Subject: minor updates

---
 src/client/views/nodes/MapBox/MapBox.tsx | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

(limited to 'src/client/views/nodes/MapBox')

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index e62f835b2..0314aa419 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -85,6 +85,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @computed get allSidebarDocs() { return DocListCast(this.dataDoc[this.SidebarKey]); };
     @computed get allMapMarkers() { return DocListCast(this.dataDoc[this.annotationKey]); };
     @observable private allMarkers: Doc[] = [];
+    //TODO: change all markers to a filter function to change 
 
 
     @observable _showSidebar = false;
@@ -128,7 +129,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.allMapMarkers?.forEach(doc => {
             // search for if the map marker exists, else create marker
             if (doc.lat !== undefined && doc.lng !== undefined) {
-                const marker = Docs.Create.MapMarkerDocument(NumCast(doc.lat), NumCast(doc.lng), [], {})
+                const marker = Docs.Create.MapMarkerDocument(NumCast(doc.lat), NumCast(doc.lng), [doc], {})
                 this.allMarkers.push(marker)
             }
         })
@@ -160,6 +161,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
         this.fitBounds(map);
         this.fillMarkers();
+        // this._map.addListener(drawingManager, 'markercomplete', this.addMarker)
+    }
+
+    //TODO: Is this a valid way for adding marker from drawing manager..? If so, how do we update the allMarkers & render so info window appears
+    @action
+    private addMarker = (marker: google.maps.Marker) => {
+        const markerPosition = marker.getPosition();
+        const newMapMarker = Docs.Create.MapMarkerDocument(NumCast(markerPosition?.lat()), NumCast(markerPosition?.lng()), [], {})
+        this.allMarkers.push(newMapMarker)
     }
 
     @action
@@ -284,14 +294,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.selectedPlace = undefined;
     }
 
-    @action
-    private addMarker = (location: google.maps.LatLng | undefined, map: google.maps.Map) => {
-        new window.google.maps.Marker({
-            position: location,
-            map: map
-        });
-    }
-
     public get SidebarKey() { return this.fieldKey + "-sidebar"; }
 
     @computed get sidebarHandle() {
@@ -339,7 +341,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     }
     // create marker prop --> func that 
     private renderMarkers = () => {
-        this.allMarkers.map(place => (
+        return this.allMarkers.map(place => (
             <Marker
                 key={place[Id]}
                 position={{ lat: NumCast(place.lat), lng: NumCast(place.lng) }}
@@ -349,7 +351,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         ))
     }
 
-    private renderInfoWindow = (marker: MapMarker) => {
+    private renderInfoWindow = () => {
         return this.infoWindowOpen && this.selectedPlace && (
             <InfoWindow
                 anchor={this.markerMap[this.selectedPlace._markerId!]}
@@ -358,8 +360,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}>
                     <div style={{ fontSize: 16 }}>
                         <div>
-                            {// TODO need to figure out how to render these childDocs of the MapMarker in InfoWindow
-                                marker.childDocs}
+                            {/* {// TODO need to figure out how to render these childDocs of the MapMarker in InfoWindow
+                                marker.childDocs} */}
                             <hr />
                             <form>
                                 <label>Title: </label><br />
@@ -403,8 +405,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         <input ref={this.inputRef} className="searchbox" type="text" placeholder="Search anywhere:" />
                     </Autocomplete>
 
-                    {this.renderMarkers}
-                    {this.renderInfoWindow}
+                    {this.renderMarkers()}
+                    {this.renderInfoWindow()}
                 </GoogleMap>
             </div>
             {/* {/* </LoadScript > */}
-- 
cgit v1.2.3-70-g09d2