Working on pushpin and infowindow datadoc stuff

2 files changed, 67 insertions, 48 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index cc7d12128..ac26fbe08 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -604,9 +604,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * 
      * 
     **/
-
-    @observable
-    pins: any[] = []; // List of active pushpins
+   
 
     bingSearchBarContents: any = "Boston, MA"; // For Bing Maps: The contents of the Bing search bar (string)
 
@@ -617,13 +615,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @action
     updateView = ()=> {
         this._bingMap.current.setView({
-            center: new this.MicrosoftMaps.Location(this.rootDoc.latitude, this.rootDoc.longitude),
+            center: new this.MicrosoftMaps.Location(this.dataDoc.latitude, this.dataDoc.longitude),
              // zoom: location
          });
     }
 
-    infobox:any; 
 
+    infobox:any; 
     @action
     createPushpin = (latitude:number, longitude:number) =>{
         var pin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(latitude, longitude), {
@@ -641,13 +639,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.infobox.setMap(this._bingMap.current);
         //Store some metadata with the pushpin.
         pin.metadata = {
-        title: 'Pin Title',
-        description: 'Pin discription'
+            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);
     }
 
 
@@ -656,13 +658,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         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
+                location: e.target.getLocation(),
+                title: e.target.metadata.title,
+                description: e.target.metadata.description,
+                visible: true
             });
         }
-    } 
+    }
+
+    /**
+     * Returns a list of MapMarkerDocument
+     */
+    @computed get allMapPushpins() {
+        return DocListCast(this.dataDoc[this.annotationKey]);
+    }
 
     /*
      * For Bing Maps
@@ -670,20 +679,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * Finds the geocode of the searched contents and sets location to that location
     **/
    @action
-   bingSearch = async() =>{ //TODO: PlaceResult, searching more formally
+   bingSearch = async() =>{ //TODO: searching more formally
 
       // clear all pins
       // this._bingMap.current.entities.clear();
 
       const location = await this.bingGeocode(this._bingMap, this.bingSearchBarContents);
 
-      this.rootDoc.latitude = location.latitude;
-      this.rootDoc.longitude = location.longitude;
+      this.dataDoc.latitude = location.latitude;
+      this.dataDoc.longitude = location.longitude;
       this.updateView();
-
-
-
-      //Create custom Pushpin TODO: MAKE THIS ITS OWN METHOD
+       // Each marker be its own document -- pin and info
+       
       this.createPushpin(location.latitude, location.longitude);
 
       
@@ -692,6 +699,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         //     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(
@@ -710,6 +719,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
       //     }
       // );
 
+      
   // _loadPending = true;
   // /**
   //  * store a reference to google map instance
@@ -746,27 +756,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
   // };
 
 
-    // /**
-    //  * For Bing Maps
-    //  * Place the marker on bing maps & store the empty marker as a MapMarker Document in allMarkers list
-    //  * @param location - this.MicrosoftMaps.Location
-    //  * @param map - this._bingMap
-    //  */
-    // @action
-    // private placeMarker = (location: any) => {
-    //     const pin = new this.MicrosoftMaps.Pushpin(location, {
-    //         title: this.bingSearchBarContents,
-    //         subTitle: 'subtitle here',
-    //         text: '1'
-    //     });
-
-    //     this._bingMap.current.panTo(location);
-    //     this._bingMap.current.entities.push(pin);
-
-    //     // const mapMarker = Docs.Create.MapMarkerDocument(NumCast(location.latitude), NumCast(location.longitude), false, [], {});
-    //     // this.addDocument(mapMarker, this.annotationKey);
-    // };
-
 
 
 
@@ -774,17 +763,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * View options for bing maps
     */
     bingViewOptions = {
-        center: { latitude: defaultCenter.lat, longitude: defaultCenter.lng },// TODO: latitude: this.rootDoc.latitude, longitude: this.rootDoc.longitude
+        center: { latitude: this.dataDoc.latitude ?? defaultCenter.lat , longitude: this.dataDoc.longitude ?? defaultCenter.lng},
+        zoom: this.dataDoc.latitude ?? 10,
         mapTypeId: 'grayscale',
     };
 
     /**
      * Map options
-     * TODO: CHANGE TO BE MORE USER-FRIENDLY
      */
     bingMapOptions = {
         navigationBarMode: 'square',
+        backgroundColor:'#f1f3f4',
+        enableInertia:true,
     };
+
     bingMapReady = (map: any) => (this._bingMap = map.map);
     render() {
         const renderAnnotations = (docFilters?: () => string[]) => null;
@@ -826,10 +818,23 @@ 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}
+                                    />
+                                ))}
+
 
                     <div style={{ display: MapBox.UseBing ? 'none' : undefined }}>
                         <GoogleMap mapContainerStyle={mapContainerStyle} onZoomChanged={this.zoomChanged} onCenterChanged={this.centered} onLoad={this.loadHandler} options={mapOptions}>
diff --git a/src/client/views/nodes/MapBox/MapBox2.tsx b/src/client/views/nodes/MapBox/MapBox2.tsx
index c11f76439..4c28d4df1 100644
--- a/src/client/views/nodes/MapBox/MapBox2.tsx
+++ b/src/client/views/nodes/MapBox/MapBox2.tsx
@@ -703,11 +703,25 @@ export class MapBox2 extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     {!MapBox2.UseBing ? null : 
                     <input type="button" value="Search" 
                     onClick={this.bingSearch}/>}
-                    
-
-
+                
 
                     {!MapBox2.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}
+                                    />
+                                ))}
+
 
                     <div style={{ display: MapBox2.UseBing ? 'none' : undefined }}>
                         <GoogleMap mapContainerStyle={mapContainerStyle} onZoomChanged={this.zoomChanged} onCenterChanged={this.centered} onLoad={this.loadHandler} options={mapOptions}>