yuh

1 files changed, 55 insertions, 8 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 3c83698d8..f4f9e949f 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -22,6 +22,7 @@ import { AnchorMenu } from '../../pdf/AnchorMenu';
 import { Annotation } from '../../pdf/Annotation';
 import { SidebarAnnos } from '../../SidebarAnnos';
 import { FieldView, FieldViewProps } from '../FieldView';
+import { PinProps } from '../trails/PresBox';
 import './MapBox.scss';
 import { MapBoxInfoWindow } from './MapBoxInfoWindow';
 
@@ -527,8 +528,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         );
     }
 
-    getAnchor = (addAsAnnotation: boolean) => AnchorMenu.Instance?.GetAnchor(this._savedAnnotations, addAsAnnotation) ?? this.rootDoc;
-
+    getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => AnchorMenu.Instance?.GetAnchor(this._savedAnnotations, addAsAnnotation) ?? this.rootDoc;
     /**
      * render contents in allMapMarkers (e.g. images with exifData) into google maps as map marker
      * @returns
@@ -581,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);
@@ -593,7 +593,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     };
 
 
-    bingSearchBarContents: any; // For Bing Maps: The contents of the Bing search bar (string)
+
+
+    bingSearchBarContents: any = "Boston, MA"; // For Bing Maps: The contents of the Bing search bar (string)
 
     /*
      * For Bing Maps
@@ -602,17 +604,60 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     **/
    @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: 15,
+        //    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 = {
@@ -650,9 +695,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     <EditableText editing 
                         onEdit={(newText: string) => this.bingSearchBarContents = newText}
                         placeholder="..."
-                        size="medium"
+                        size="medium" 
                         text="Boston, MA"
+                        onKeyPress={e => console.log(e.key)}
                     />}
+                    
                     {!MapBox.UseBing ? null : 
                     <input type="button" value="Search" 
                     onClick={this.bingSearch}/>}
@@ -686,8 +733,8 @@ 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}