From 53dfd5f380d8c75fedc967577fb16310d08cefea Mon Sep 17 00:00:00 2001
From: Aubrey-Li <63608597+Aubrey-Li@users.noreply.github.com>
Date: Mon, 19 Jul 2021 11:57:22 -0700
Subject: map as node

---
 .../collections/MapView/CollectionMapView.tsx      | 134 ++++++++++-----------
 1 file changed, 67 insertions(+), 67 deletions(-)

(limited to 'src/client/views/collections/MapView')

diff --git a/src/client/views/collections/MapView/CollectionMapView.tsx b/src/client/views/collections/MapView/CollectionMapView.tsx
index ebf57c0c1..290972364 100644
--- a/src/client/views/collections/MapView/CollectionMapView.tsx
+++ b/src/client/views/collections/MapView/CollectionMapView.tsx
@@ -52,7 +52,7 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
 
 
     @observable private _map = null as unknown as google.maps.Map;
-    @observable private selectedPlace: Doc = ;
+    @observable private selectedPlace: LocationData = null as any;
     @observable private markerMap = {};
     @observable private center = defaultCenter;
     @observable private zoom = 2.5;
@@ -114,7 +114,7 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
     }
 
     @action
-    private markerClickHandler = (e: MouseEvent, place: Doc) => {
+    private markerClickHandler = (e: MouseEvent, place: LocationData) => {
         // set which place was clicked
         this.selectedPlace = place
 
@@ -150,7 +150,7 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
 
     @action
     @undoBatch
-    private handleDragMarker = (marker: any, place: Doc) => {
+    private handleDragMarker = (marker: any, place: LocationData) => {
         // if (marker != null) {
         //     place = {
         //         id: place.id,
@@ -210,58 +210,58 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
         )
     }
 
-    @computed get markerContent() {
-        const allMarkers = this.childLayoutPairs
-        const markerId = NumCast(this.layoutDoc._itemIndex);
-        const selectedMarker = this.childLayoutPairs?.[markerId];
-        const position = {
-            lat: NumCast(this.layoutDoc.lat),
-            lng: NumCast(this.layoutDoc.lng)
-        }
-        return <>
-            {
-                allMarkers?.map(place => (
-                    <Marker
-                        key={markerId}
-                        position={position}
-                        onClick={e => this.markerClickHandler(e, place.layout)} //??
-                        draggable={true}
-                        onDragEnd={marker => this.handleDragMarker(marker, place.layout)}
-                    />
-                ))
-            }
-            {this.infoWindowOpen && selectedMarker && (
-                <InfoBox
-                    //anchor={selectedMarker}
-                    // onCloseClick={this.handleInfoWindowClose}
-                    position={position}
-                // options={{ enableEventPropagation: true }}
-                >
-                    <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}>
-                        <div style={{ fontSize: 16 }}>
-                            {/* the linkmenu as the ones in other nodes */}
-                            <div>
-                                <a>a link to another node</a>
-                                <hr />
-                            </div>
-                            <div>
-                                <a>a link to another node</a>
-                                <hr />
-                            </div>
-                            <div>
-                                <a>a link to another node</a>
-                                <hr />
-                            </div>
-                            <div>
-                                <button>New +</button>
-                            </div>
-                        </div>
-                    </div>
-                </InfoBox>
-            )}
-
-        </>
-    }
+    // @computed get markerContent() {
+    //     const allMarkers = this.childLayoutPairs
+    //     const markerId = NumCast(this.layoutDoc._itemIndex);
+    //     const selectedMarker = this.childLayoutPairs?.[markerId];
+    //     const position = {
+    //         lat: NumCast(this.layoutDoc.lat),
+    //         lng: NumCast(this.layoutDoc.lng)
+    //     }
+    //     return <>
+    //         {
+    //             allMarkers?.map(place => (
+    //                 <Marker
+    //                     key={markerId}
+    //                     position={position}
+    //                     onClick={e => this.markerClickHandler(e, place.layout)} //??
+    //                     draggable={true}
+    //                     onDragEnd={marker => this.handleDragMarker(marker, place.layout)}
+    //                 />
+    //             ))
+    //         }
+    //         {this.infoWindowOpen && selectedMarker && (
+    //             <InfoBox
+    //                 //anchor={selectedMarker}
+    //                 // onCloseClick={this.handleInfoWindowClose}
+    //                 position={position}
+    //             // options={{ enableEventPropagation: true }}
+    //             >
+    //                 <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}>
+    //                     <div style={{ fontSize: 16 }}>
+    //                         {/* the linkmenu as the ones in other nodes */}
+    //                         <div>
+    //                             <a>a link to another node</a>
+    //                             <hr />
+    //                         </div>
+    //                         <div>
+    //                             <a>a link to another node</a>
+    //                             <hr />
+    //                         </div>
+    //                         <div>
+    //                             <a>a link to another node</a>
+    //                             <hr />
+    //                         </div>
+    //                         <div>
+    //                             <button>New +</button>
+    //                         </div>
+    //                     </div>
+    //                 </div>
+    //             </InfoBox>
+    //         )}
+
+    //     </>
+    // }
 
     @action
     private addMarker = (location: google.maps.LatLng | undefined, map: google.maps.Map) => {
@@ -271,18 +271,18 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
         });
     }
 
-    @action
-    private renderMarkerToMap = (marker: Doc) => {
-        const id = StrCast(marker.id);
-        const lat = NumCast(marker.lat);
-        const lng = NumCast(marker.lng);
-
-        return <Marker
-            key={id}
-            position={{ lat: lat, lng: lng }}
-            onClick={e => this.markerClickHandler(e, marker)}
-        />
-    }
+    // @action
+    // private renderMarkerToMap = (marker: Doc) => {
+    //     const id = StrCast(marker.id);
+    //     const lat = NumCast(marker.lat);
+    //     const lng = NumCast(marker.lng);
+
+    //     return <Marker
+    //         key={id}
+    //         position={{ lat: lat, lng: lng }}
+    //         onClick={e => this.markerClickHandler(e, marker)}
+    //     />
+    // }
 
     render() {
         const { Document, fieldKey, isContentActive: active } = this.props;
-- 
cgit v1.2.3-70-g09d2