From 1925afd8a5e2cea4fcb6d2e525264967a20f6841 Mon Sep 17 00:00:00 2001
From: Eric <ericmabr@gmail.com>
Date: Mon, 10 Apr 2023 16:05:55 -0400
Subject: Pre-bob

---
 src/client/views/nodes/MapBox/MapBox.tsx           | 83 ++++++++++++++++------
 src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx |  4 +-
 2 files changed, 64 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index ef45cdd1a..902aa2d13 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -239,7 +239,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     private markerClickHandler = (e: google.maps.MapMouseEvent, place: Doc) => {
         // set which place was clicked
         this.selectedPlace = place;
-        place.infoWindowOpen = true;
+        // place.infoWindowOpen = true;
     };
 
     /**
@@ -629,7 +629,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         const mapMarker = Docs.Create.MapMarkerDocument(NumCast(latitude), NumCast(longitude), false, [], {});
         this.addDocument(mapMarker, this.annotationKey);
         // mapMarker.infoWindowOpen = true;
-        console.log("original:" + mapMarker)
     }
 
 
@@ -646,13 +645,25 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             });
         }
     }
+    onHover = (e: { target: { metadata: { title: any; description: any; }; getLocation: () => any; }; }) => {
+        //Make sure the infobox has metadata to display.
+        if (e.target.metadata) {
+            //Set the infobox options with the metadata of the pushpin. // HOW DO I GET THE CORRECT INFOBOX FOR THIS PIN? CAN I use this e?
+            this.infobox.setOptions({
+                location: e.target.getLocation(),
+                title: e.target.metadata.title,
+                description: e.target.metadata.description,
+                visible: true
+            });
+        }
+    }
 
     //PushpinClicked using MapBoxInfoWindow
     private pushpinClicked2 = (e: { target: { metadata: { title: any; description: any; }; getLocation: () => any; }; }, pin: Doc) => {
         // // set which place was clicked
         // this.selectedPlace = place;
         pin.infoWindowOpen = true;
-        console.log("later:" + pin.infoWindowOpen)
+        // console.log("later:" + pin.infoWindowOpen)
     }
 
     /**
@@ -661,7 +672,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @computed get allMapPushpins() {
         return DocListCast(this.dataDoc[this.annotationKey]);
     }
+    /**
+     * Map OnClick create pushpin
+     */
+    @action
+    mapOnClick=(e: { location: { latitude: any; longitude: any;}; })=>{
+        if(this.placePinOn){
+            this.createPushpin(e.location.latitude, e.location.longitude);
+            this.addAllPins();
+            this.placePinOn = false;
+        }
+    }
+
 
+    searched_pin:any;
     /*
      * For Bing Maps
      * Called by search button's onClick 
@@ -669,10 +693,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     **/
     @action
     bingSearch = async() =>{
-
-        // clear all pins
-        this._bingMap.current.entities.clear();
-        //TODO: clear all infoboxes
+        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick);
+        this.addAllPins();
 
         const location = await this.bingGeocode(this._bingMap, this.bingSearchBarContents);
 
@@ -680,19 +702,19 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.dataDoc.longitude = location.longitude;
         this.updateView();
 
-
-        
-        //   // Creates a temporary pin but does not add it to the dataDoc, UNCOMMENT LATER
-        //   var pin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(location.latitude, location.longitude), {
-        //     title: this.bingSearchBarContents,
-        //     subTitle: 'subtitle here',
-        //     text: '1',
-        //     color: 'blue'
-        // });
-        // this._bingMap.current.entities.push(pin);
+        // Creates a temporary pin but does not add it to the dataDoc
+        var temp = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(location.latitude, location.longitude), {
+            // title: this.bingSearchBarContents,
+            // subTitle: 'subtitle here',
+            // text: '1',
+            color: 'blue'
+        });
+        if (temp!=this.searched_pin || this.searched_pin==null){
+            this._bingMap.current.entities.push(this.searched_pin);
+            this.searched_pin = temp;
+        }
+            
         
-            this.createPushpin(location.latitude, location.longitude);  // Creates an actual pushpin
-            this.addAllPins();  // Adds all pushpins in the datadoc onto the map
 
             console.log(this.allMapPushpins
                 .filter(marker => marker.infoWindowOpen)
@@ -706,15 +728,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
       */
     @action
     addAllPins = () =>{
+        this._bingMap.current.entities.clear(); 
+        //TODO: clear all infoboxes
+        if(this.searched_pin)
+            this._bingMap.current.entities.push(this.searched_pin);
         this.allMapPushpins.map(pin => this.createInfobox(pin)); 
+        this.allMapPushpins.map(pin => this._bingMap.current.entities.push(pin));
     }
 
     @action
     createInfobox = (pin:any) =>{
         var pushPin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.lat, pin.lng), {
-            title: this.bingSearchBarContents,
-            subTitle: 'subtitle here',
-            text: '1'
+            // title: this.bingSearchBarContents,
+            // subTitle: 'subtitle here',
+            // text: '1'
         });
         this._bingMap.current.entities.push(pushPin);
 
@@ -737,6 +764,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
         // For our infowindow
         this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e:any) => this.pushpinClicked2(e, pushPin));
+        this.MicrosoftMaps.Events.addHandler(pushPin, 'mouseover', (e:any) => this.onHover(e));
 
     }
 
@@ -846,6 +874,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     </BingMapsReact>
                     
                     }
+                    {/* <MapBoxInfoWindow
+                                    key={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})[Id]}
+                                    {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
+                                    place={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})}
+                                    markerMap={this.markerMap}
+                                    PanelWidth={this.infoWidth}
+                                    PanelHeight={this.infoHeight}
+                                    moveDocument={this.moveDocument}
+                                    isAnyChildContentActive={this.isAnyChildContentActive}
+                                    whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+                                /> */}
                     
 
 
diff --git a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
index 00bedafbe..08ed7b40f 100644
--- a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
+++ b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
@@ -47,7 +47,9 @@ export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & Vi
     removeDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.RemoveDocFromList(this.props.place, 'data', d), true as boolean);
     render() {
         return (
-            <InfoWindow anchor={this.props.markerMap[this.props.place[Id]]} onCloseClick={this.handleInfoWindowClose}>
+            <InfoWindow 
+            // anchor={this.props.markerMap[this.props.place[Id]]} 
+            onCloseClick={this.handleInfoWindowClose}>
                 <div className="mapbox-infowindow">
                     <div style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight() }}>
                         <CollectionStackingView
-- 
cgit v1.2.3-70-g09d2