1 files changed, 46 insertions, 10 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 15cf22953..283d57bb6 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { GoogleMapProps, Marker } from '@react-google-maps/api';
 import BingMapsReact from 'bingmaps-react';
-import { EditableText } from 'browndash-components';
+import { EditableText, Toggle } from 'browndash-components';
 import e from 'connect-flash';
 import { truncateSync } from 'fs';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
@@ -65,7 +65,7 @@ const bingApiKey = process.env.BING_MAPS; // if you're running local, get a Bing
 const script = document.createElement('script');
 script.defer = true;
 script.async = true;
-script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,drawing`;
+script.src = `https://maps.googleapis.com/maps/api/js?key=${bingApiKey}&libraries=places,drawing`;
 document.head.appendChild(script);
 
 /**
@@ -665,8 +665,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * Pushpin dblclick
      */
     @action
-    pushpinDblClicked = (pinDoc:Doc,pin:any) => {
-        this.removePushpin(pinDoc,pin);
+    pushpinDblClicked = (pin:any, pinDoc?:Doc) => {
+        if(pinDoc)
+            this.removePushpin(pinDoc,pin);
+        else
+            this._bingMap.current.entities.remove(pin);
     };
     /*
      * Pushpin onclick
@@ -720,7 +723,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         if (this.placePinOn) {
             this.createPushpin(e.location.latitude, e.location.longitude);
             // this.addAllPins();
-            this.placePinOn = false;
+            // this.placePinOn = false;
         }
     };
 
@@ -779,6 +782,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         var temp = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(location.latitude, location.longitude), {
             color: 'blue',
         });
+        
+        this.MicrosoftMaps.Events.addHandler(temp, 'dblclick', (e: any) => this.pushpinDblClicked(temp));
         if (temp != this.searched_pin || this.searched_pin == null) {
             this._bingMap.current.entities.push(temp);
             this.searched_pin = temp;
@@ -835,7 +840,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this._bingMap.current.entities.push(pushPin);
 
         this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e: any) => this.pushpinClicked(pin,pushPin));
-        this.MicrosoftMaps.Events.addHandler(pushPin, 'dblclick', (e: any) => this.pushpinDblClicked(pin,pushPin));
+        this.MicrosoftMaps.Events.addHandler(pushPin, 'dblclick', (e: any) => this.pushpinDblClicked(pushPin, pin));
     }
 
 
@@ -932,11 +937,42 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     {SnappingManager.GetIsDragging() ? null : renderAnnotations()}
                     {this.annotationLayer}
 
-                    <EditableText setEditing={(isEditing: boolean) => ({})} editing onEdit={(newText: string) => (this.bingSearchBarContents = newText)} placeholder="..." text="Boston, MA" />
-
-                    <input type="button" value="Search" onClick={this.bingSearch} />
+                    <EditableText setEditing={(isEditing: boolean) => ({})} editing onEdit={(newText: string) => (this.bingSearchBarContents = newText)} placeholder="Boston, MA" text="Boston, MA" />
+                    <div className='mapBox-topbar'>
+                        <input type="button" value="Search" onClick={this.bingSearch} />
+
+                        {/* {this.placePinOn ? <input type="button" value="Place Pin Mode On" onClick={this.togglePlacePin} /> : <input type="button" value="Place Pin Mode Off" onClick={this.togglePlacePin} />} */}
+                        {/* {this.placePinOn ? <input type="button" value="Place Pin Mode On" onClick={this.togglePlacePin} /> : <input type="button" value="Place Pin Mode Off" onClick={this.togglePlacePin} />}
+
+                        <Toggle
+                            onClick={this.togglePlacePin}
+                            onPointerDown={function noRefCheck(){}}
+                            onPointerDownCapture={function noRefCheck(){}}
+                            onPointerMove={function noRefCheck(){}}
+                            onPointerMoveCapture={function noRefCheck(){}}
+                            onPointerUp={function noRefCheck(){}}
+                            text="Place Pin"
+                            toggleType = "checkbox"
+                            toggleStatus= {false}
+                            type="secondary"
+                        /> */}
+
+                        <input type="checkbox"
+                                    id="switch"
+                                    className="checkbox" 
+                                    checked={this.placePinOn}
+                                    onChange={this.togglePlacePin}
+                                    />
+                                        
+                                <label htmlFor="switch"
+                                    className="toggle">
+                                    <p>
+                                    {this.placePinOn ? 'Place Pin ON' : 'Place Pin OFF'}
+                                    </p>
+                                </label>
+                    </div>
+                    
 
-                    {this.placePinOn ? <input type="button" value="Place Pin Mode On" onClick={this.togglePlacePin} /> : <input type="button" value="Place Pin Mode Off" onClick={this.togglePlacePin} />}
                     {/* {this.pinIsSelected_TEMPORARY? <input type="button" value="Delete Pin" onClick={this.removeSelectedPin} /> : null} */}
                     <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions}>
                     </BingMapsReact>