From b703dc034c84ecc2842f34b562097ee253ba09ac Mon Sep 17 00:00:00 2001
From: Eric <ericmabr@gmail.com>
Date: Thu, 6 Apr 2023 10:24:55 -0400
Subject: Working on mapboxinfowindow integration

---
 src/client/views/nodes/MapBox/MapBox.tsx | 180 ++++++++++++++-----------------
 1 file changed, 81 insertions(+), 99 deletions(-)

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

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index ac26fbe08..1892a5b61 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -624,29 +624,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     infobox:any; 
     @action
     createPushpin = (latitude:number, longitude:number) =>{
-        var pin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(latitude, longitude), {
-            title: this.bingSearchBarContents,
-            subTitle: 'subtitle here',
-            text: '1'
-        });
-
-        //Create an infobox at the pin
-        this.infobox = new this.MicrosoftMaps.Infobox(new this.MicrosoftMaps.Location(latitude, longitude), {
-            visible: false
-        });
-
-        //Assign the infobox to a map instance.
-        this.infobox.setMap(this._bingMap.current);
-        //Store some metadata with the pushpin.
-        pin.metadata = {
-            title: this.bingSearchBarContents,
-            description: 'Pin description'
-        };
-        //Add a click event handler to the pushpin.
-        this.MicrosoftMaps.Events.addHandler(pin, 'click', this.pushpinClicked);
-        //Add pushpin to the map.
-        this._bingMap.current.entities.push(pin);
-
         // Stores the pushpin as a MapMarkerDocument
         const mapMarker = Docs.Create.MapMarkerDocument(NumCast(latitude), NumCast(longitude), false, [], {});
         this.addDocument(mapMarker, this.annotationKey);
@@ -666,6 +643,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
     }
 
+    //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;
+    }
+
     /**
      * Returns a list of MapMarkerDocument
      */
@@ -682,81 +666,73 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
    bingSearch = async() =>{ //TODO: searching more formally
 
       // clear all pins
-      // this._bingMap.current.entities.clear();
+      this._bingMap.current.entities.clear();
+      //TODO: clear all infoboxes
 
       const location = await this.bingGeocode(this._bingMap, this.bingSearchBarContents);
 
       this.dataDoc.latitude = location.latitude;
       this.dataDoc.longitude = location.longitude;
       this.updateView();
-       // Each marker be its own document -- pin and info
-       
-      this.createPushpin(location.latitude, location.longitude);
 
-      
-        // // Adds all pins to the map
-        // for (let i = 0; i < temp.length; i++) {
-        //     this._bingMap.current.entities.push(temp[i]);
-        // }
-  }
-    // const mapMarker = Docs.Create.MapMarkerDocument(NumCast(location.latitude), NumCast(location.longitude), false, [], {});
-    // this.addDocument(mapMarker, this.annotationKey);
-
-
-      // this.MicrosoftMaps.SpatialDataService.GeoDataAPIManager.getBoundary(
-      //     this._bingMap.current.getCenter(),
-      //     this.geoDataRequestOptions,
-      //     this._bingMap.current,
-      //     function (data) {
-      //         if (data.results && data.results.length > 0) {
-      //             map.entities.push(data.results[0].Polygons);
-      //         }
-      //     },
-      //     null,
-      //     function errCallback(networkStatus, statusMessage) {
-      //         console.log(networkStatus);
-      //         console.log(statusMessage);
-      //     }
-      // );
 
       
-  // _loadPending = true;
-  // /**
-  //  * store a reference to google map instance
-  //  * setup the drawing manager on the top right corner of map
-  //  * fit map bounds to contain all markers
-  //  * 
-  //  */
-  // @action
-  // private loadHandler = () => {
-
-  //     // this._loadPending = true;
-
-  //     // // for making GoogleMap markers
-  //     // // const centerControlDiv = this.CenterControl();
-  //     // // map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv);
+    //   // 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);
       
-  //     // // this._bingMap.current.
+        this.createPushpin(location.latitude, location.longitude);  // Creates an actual pushpin
+        this.addAllPins();  // Adds all pushpins in the datadoc onto the map
 
-  //     // map.setZoom(NumCast(this.dataDoc.mapZoom, 2.5));
-  //     // map.setCenter(new google.maps.LatLng(NumCast(this.dataDoc.mapLat), NumCast(this.dataDoc.mapLng)));
-  //     // setTimeout(() => {
-  //     //     if (this._loadPending && this._map.getBounds()) {
-  //     //         this._loadPending = false;
-  //     //         this.layoutDoc.fitContentsToBox && this.fitBounds(this._map);
-  //     //     }
-  //     // }, 250);
+        console.log(this.allMapPushpins
+            .filter(marker => marker.infoWindowOpen)
+            .length)
+   }
 
-  //     // // listener to addmarker event, creates pushpin onClick
-  //     // this._bingMap.addListener('click', (e: MouseEvent) => {
-  //     //     if (this.toggleAddMarker === true) {
-  //     //         this.placeMarker((e as any).latLng, map); //TODO: Implement placeMarker
-  //     //     }
-  //     // });
-  // };
+   /**
+    * Adds all pushpins in dataDoc onto the map
+    */
+   @action
+   addAllPins = () =>{
+    this.allMapPushpins.map(pin => this.createInfobox(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'
+        });
+        this._bingMap.current.entities.push(pushPin);
 
+        //Create an infobox at the pin
+        this.infobox = new this.MicrosoftMaps.Infobox(new this.MicrosoftMaps.Location(pin.lat, pin.lng), {
+            visible: false
+        });
+        //Assign the infobox to a map instance.
+        this.infobox.setMap(this._bingMap.current);
+        //Store some metadata with the pushpin.
+        pushPin.metadata = {
+            title: pushPin.title,
+            description: 'Pin description'
+        };
 
+        //Add a click event handler to the pushpin.
+        // For bing maps infobox
+        // this.MicrosoftMaps.Events.addHandler(pushPin, 'click', this.pushpinClicked);
+
+        // For our infowindow
+        this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e:any) => this.pushpinClicked2(e, pushPin));
+
+    }
+
+    
 
 
     /** 
@@ -818,22 +794,28 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     <input type="button" value="Search" 
                     onClick={this.bingSearch}/>}
                     
-                    {!MapBox.UseBing ? null : <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions} />}
-                    {this.allMapMarkers
-                                .filter(marker => marker.infoWindowOpen)
-                                .map(marker => (
-                                    <MapBoxInfoWindow
-                                        key={marker[Id]}
-                                        {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
-                                        place={marker}
-                                        markerMap={this.markerMap}
-                                        PanelWidth={this.infoWidth}
-                                        PanelHeight={this.infoHeight}
-                                        moveDocument={this.moveDocument}
-                                        isAnyChildContentActive={this.isAnyChildContentActive}
-                                        whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
-                                    />
-                                ))}
+                    {!MapBox.UseBing ? null : 
+                    <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions} >
+                        {this.allMapPushpins
+                            .filter(marker => marker.infoWindowOpen)
+                            .map(marker => (
+                                console.log('this is a marker window')
+                                // <MapBoxInfoWindow
+                                //     key={marker[Id]}
+                                //     {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
+                                //     place={marker}
+                                //     markerMap={this.markerMap}
+                                //     PanelWidth={this.infoWidth}
+                                //     PanelHeight={this.infoHeight}
+                                //     moveDocument={this.moveDocument}
+                                //     isAnyChildContentActive={this.isAnyChildContentActive}
+                                //     whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+                                // />
+                            ))}
+                    </BingMapsReact>
+                    
+                    }
+                    
 
 
                     <div style={{ display: MapBox.UseBing ? 'none' : undefined }}>
-- 
cgit v1.2.3-70-g09d2

