Added infobox after pushpin clicked

1 files changed, 66 insertions, 27 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index b01426bcd..cc7d12128 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -606,16 +606,64 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     **/
 
     @observable
-    _bingLatitude:number | undefined;
-
-    @observable
-    _bingLongitude:number | undefined;
+    pins: any[] = []; // List of active pushpins
 
     bingSearchBarContents: any = "Boston, MA"; // For Bing Maps: The contents of the Bing search bar (string)
 
     geoDataRequestOptions = {
         entityType: 'PopulatedPlace'
     };
+
+    @action
+    updateView = ()=> {
+        this._bingMap.current.setView({
+            center: new this.MicrosoftMaps.Location(this.rootDoc.latitude, this.rootDoc.longitude),
+             // zoom: location
+         });
+    }
+
+    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: 'Pin Title',
+        description: 'Pin discription'
+        };
+        //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);
+    }
+
+
+    pushpinClicked = (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
+            });
+        }
+    } 
+
     /*
      * For Bing Maps
      * Called by search button's onClick 
@@ -631,17 +679,21 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
       this.rootDoc.latitude = location.latitude;
       this.rootDoc.longitude = location.longitude;
+      this.updateView();
+
+
+
+      //Create custom Pushpin TODO: MAKE THIS ITS OWN METHOD
+      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]);
+        // }
+  }
 
-      // this.rootDoc.latitude =location.latitude;
-      // this.rootDoc.longitude =location.longitude; // TODO: How to update the rootDoc with the correct info?
-      //DocComponents file is where rootDoc is
 
-      // call a helper method that updates the this._bingMap.current.setView, 
-      // replaces this method call below
-      this._bingMap.current.setView({
-         center: new this.MicrosoftMaps.Location(location.latitude, location.longitude),
-          // zoom: location
-      });
       // this.MicrosoftMaps.SpatialDataService.GeoDataAPIManager.getBoundary(
       //     this._bingMap.current.getCenter(),
       //     this.geoDataRequestOptions,
@@ -658,19 +710,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
       //     }
       // );
 
-      //Create custom Pushpin
-      var pin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(location.latitude, location.longitude), {
-          title: this.bingSearchBarContents,
-          subTitle: 'subtitle here',
-          text: '1'
-      });
-
-      //Add the pushpin to the map
-      this._bingMap.current.entities.push(pin);
-      // const mapMarker = Docs.Create.MapMarkerDocument(this._bingMap.location.latitude, this._bingMap.location.latitude, false, [], {});
-      //     this.addDocument(mapMarker, this.annotationKey); // tells mapbox to add this marker to set of annotations on doc
-  }
-
   // _loadPending = true;
   // /**
   //  * store a reference to google map instance
@@ -780,7 +819,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         placeholder="..."
                         size="medium" 
                         text="Boston, MA"
-                        onKeyPress={e => console.log(e.key)}
+                        onKeyPress={(e: { key: any; }) => console.log(e.key)}
                     />}
                     
                     {!MapBox.UseBing ? null :