Added basic search functionality:

:

1 files changed, 40 insertions, 0 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 039f11cd1..3c83698d8 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';
@@ -591,6 +592,25 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         });
     };
 
+
+    bingSearchBarContents: any; // 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() =>{
+        const location = await this.bingGeocode(this._bingMap, this.bingSearchBarContents);
+        this._bingMap.current.setView({
+           center: new this.MicrosoftMaps.Location(location.latitude, location.longitude),
+           zoom: 15,
+        });
+    }
+
+
+
     bingViewOptions = {
         center: { latitude: defaultCenter.lat, longitude: defaultCenter.lng },
         mapTypeId: 'grayscale',
@@ -617,12 +637,31 @@ 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"
+                    />}
+                    {!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}>
@@ -647,6 +686,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                                 ))}
                             {/* {this.handleMapCenter(this._map)} */}
                         </GoogleMap>
+                        
                     </div>
                     {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : (
                         <MarqueeAnnotator