1 files changed, 89 insertions, 2 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 0064a2022..d35a5ef2e 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1,6 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Autocomplete, GoogleMap, GoogleMapProps, Marker } from '@react-google-maps/api';
 import BingMapsReact from 'bingmaps-react';
+import { EditableText } from 'browndash-components';
 import { action, computed, IReactionDisposer, observable, ObservableMap, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -580,7 +581,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     res(this.bingGeocode(map, query));
                 });
             } else {
-                this._bingSearchManager.geocode({
+                this._bingSearchManager.geocode({   
                     where: query,
                     callback: action((r: any) => {
                         res(r.results[0].location);
@@ -591,8 +592,72 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         });
     };
 
+
+
+
+    bingSearchBarContents: any = "Boston, MA"; // For Bing Maps: The contents of the Bing search bar (string)
+
+    /*
+     * For Bing Maps
+     * Called by search button's onClick 
+     * Finds the geocode of the searched contents and sets location to that location
+    **/
+   @action
+     bingSearch = async() =>{
+
+        // 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; // 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: ,
+        });
+
+        //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
+    }
+
+
+    // /**
+    //  * For Bing Maps
+    //  * Place the marker on bing maps & store the empty marker as a MapMarker Document in allMarkers list
+    //  * @param position - the LatLng position where the marker is placed
+    //  * @param map
+    //  */
+    // @action
+    // private placeMarker = (position: google.maps.LatLng, map: google.maps.Map) => {
+    //     const marker = new google.maps.Marker({
+    //         position: position,
+    //         map: map,
+    //     });
+    //     map.panTo(position);
+    //     const mapMarker = Docs.Create.MapMarkerDocument(NumCast(position.lat()), NumCast(position.lng()), false, [], {});
+    //     this.addDocument(mapMarker, this.annotationKey);
+    // };
+
+
+
+
+
     bingViewOptions = {
-        center: { latitude: defaultCenter.lat, longitude: defaultCenter.lng },
+        center: { latitude: defaultCenter.lat, longitude: defaultCenter.lng },// TODO: latitude: this.rootDoc.latitude, longitude: this.rootDoc.longitude
         mapTypeId: 'grayscale',
     };
     bingMapOptions = {
@@ -617,12 +682,33 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         // });
                     }}
                     style={{ width: `calc(100% - ${this.sidebarWidthPercent})` }}>
+
+                        
                     <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>
                     {renderAnnotations(this.opaqueFilter)}
                     {SnappingManager.GetIsDragging() ? null : renderAnnotations()}
                     {this.annotationLayer}
 
+
+
+                    {!MapBox.UseBing ? null : 
+                    <EditableText editing 
+                        onEdit={(newText: string) => this.bingSearchBarContents = newText}
+                        placeholder="..."
+                        size="medium" 
+                        text="Boston, MA"
+                        onKeyPress={e => console.log(e.key)}
+                    />}
+                    
+                    {!MapBox.UseBing ? null : 
+                    <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} />}
+
                     <div style={{ display: MapBox.UseBing ? 'none' : undefined }}>
                         <GoogleMap mapContainerStyle={mapContainerStyle} onZoomChanged={this.zoomChanged} onCenterChanged={this.centered} onLoad={this.loadHandler} options={mapOptions}>
                             <Autocomplete onLoad={this.setSearchBox} onPlaceChanged={this.handlePlaceChanged}>
@@ -648,6 +734,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             {/* {this.handleMapCenter(this._map)} */}
                         </GoogleMap>
                     </div>
+
                     {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : (
                         <MarqueeAnnotator
                             rootDoc={this.rootDoc}