From 9d48c95e5a556f5be4abde83d9443e384a33197c Mon Sep 17 00:00:00 2001
From: Eric <ericmabr@gmail.com>
Date: Mon, 10 Jul 2023 14:26:37 -0400
Subject: Location metadata synced and reactions working

---
 src/client/views/nodes/trails/PresBox.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 858d83b7a..d1cfb86ae 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -41,6 +41,7 @@ export interface pinDataTypes {
     scrollable?: boolean;
     dataviz?: number[];
     pannable?: boolean;
+    map?:boolean;
     viewType?: boolean;
     inkable?: boolean;
     filters?: boolean;
@@ -378,6 +379,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const inkable = [DocumentType.INK].includes(targetType);
         const scrollable = [DocumentType.PDF, DocumentType.RTF, DocumentType.WEB].includes(targetType) || target?._viewType === CollectionViewType.Stacking;
         const pannable = [DocumentType.IMG, DocumentType.PDF].includes(targetType) || (targetType === DocumentType.COL && target?._viewType === CollectionViewType.Freeform);
+        const map = [DocumentType.MAP].includes(targetType);
         const temporal = [DocumentType.AUDIO, DocumentType.VID].includes(targetType);
         const clippable = [DocumentType.COMPARISON].includes(targetType);
         const datarange = [DocumentType.FUNCPLOT].includes(targetType);
@@ -387,7 +389,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const filters = true;
         const pivot = true;
         const dataannos = false;
-        return { scrollable, pannable, inkable, viewType, pivot, filters, temporal, clippable, dataview, datarange, poslayoutview, dataannos };
+        return { scrollable, pannable, inkable, viewType, pivot, map, filters, temporal, clippable, dataview, datarange, poslayoutview, dataannos };
     }
 
     @action
@@ -455,6 +457,17 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 changed = true;
             }
         }
+        if (pinDataTypes?.map || (!pinDataTypes && activeItem.presLat !== undefined)) {
+            if (bestTarget.latitude !== activeItem.presLat) {
+                Doc.SetInPlace(bestTarget, "latitude", NumCast(activeItem.presLat), true);
+                changed = true;
+            }
+            if (bestTarget.longitude !== activeItem.presLong) {
+                Doc.SetInPlace(bestTarget, "longitude", NumCast(activeItem.presLong), true);
+                bestTarget.restoreTargetOn = true;
+                changed = true;
+            }
+        }
         if (pinDataTypes?.temporal || (!pinDataTypes && activeItem.presStartTime !== undefined)) {
             if (bestTarget._layout_currentTimecode !== activeItem.presStartTime) {
                 bestTarget._layout_currentTimecode = activeItem.presStartTime;
@@ -633,6 +646,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 pinDoc.presXRange = undefined; //targetDoc?.xrange;
                 pinDoc.presYRange = undefined; //targetDoc?.yrange;
             }
+            if (pinProps.pinData.map) {
+                pinDoc.presLat = targetDoc?.lat;
+                //...
+            }
             if (pinProps.pinData.poslayoutview)
                 pinDoc.presPinLayoutData = new List<string>(
                     DocListCast(targetDoc[fkey] as ObjectField).map(d =>
-- 
cgit v1.2.3-70-g09d2


From caa2e09edb9c1db0af571013d006179bdc84f755 Mon Sep 17 00:00:00 2001
From: Eric <ericmabr@gmail.com>
Date: Mon, 31 Jul 2023 12:58:06 -0400
Subject: All mapType stuff and constructor is done

---
 src/client/documents/Documents.ts         |  3 ++
 src/client/views/nodes/MapBox/MapBox.tsx  | 70 +++++++++++++++++++++++--------
 src/client/views/nodes/trails/PresBox.tsx |  9 +++-
 3 files changed, 64 insertions(+), 18 deletions(-)

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 5cced6d24..ca62028c1 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -221,6 +221,7 @@ export class DocumentOptions {
     openFactoryAsDelegate?: boolean; //
     lat?: NUMt = new NumInfo('latitude of a mapping view');
     lng?: NUMt = new NumInfo('longitude of a mapping view');
+    zoom?: NUMt = new NumInfo('zoom of a mapping view');
     infoWindowOpen?: boolean;
     author?: string;
     _layout_fieldKey?: string;
@@ -289,6 +290,8 @@ export class DocumentOptions {
     presPanY?: number; // panY saved as a view spec
     presLat?: NUMt = new NumInfo('latitude of a map'); // latitude of a map
     presLong?: NUMt = new NumInfo('longitude of map'); // longitude of map
+    presZoom?: NUMt = new NumInfo('zoom of map'); // zoom of map
+    presMapType?:string;
     presViewScale?: number; // viewScale saved as a view Spec
     presTransition?: number; //the time taken for the transition TO a document
     presDuration?: number; //the duration of the slide in presentation view
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 3c8e6203a..ad534f5f2 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -132,15 +132,21 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     private _disposer: {[key:string]:IReactionDisposer} = {}
     componentDidMount() {
         this.props.setContentView?.(this);
-        this._disposer.location = reaction(() => ({lat:this.rootDoc.latitude, lng:this.rootDoc.longitude}), 
+        this._disposer.location = reaction(() => ({lat:this.rootDoc.latitude, lng:this.rootDoc.longitude, zoom:this.rootDoc.zoom,mapType:this.rootDoc.mapType}), 
         (locationObject) => {
 
-            //TODO: SAVE ZOOM? VIEW STYLE?
             this._bingMap.current.setView({
+                mapTypeId: locationObject.mapType,
+                zoom:locationObject.zoom,
                 center: new this.MicrosoftMaps.Location(locationObject.lat, locationObject.lng),
             });
+            // this._bingMap.current.setZoom(locationObject.zoom);
+
+
 
         }, {fireImmediately: true});
+
+        
     }
 
     componentWillUnmount(): void {
@@ -678,7 +684,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     updateLayout = () => {
             this.dataDoc.latitude = this._bingMap.current.getCenter().latitude;
             this.dataDoc.longitude = this._bingMap.current.getCenter().longitude;
+            this.dataDoc.zoom = this._bingMap.current.getZoom();
+            // this.dataDoc.mapType = new this.MicrosoftMaps.MapTypeId();
     };
+    /*
+     * Updates maptype
+     */
+    @action
+    updateMapType = () => {
+            this.dataDoc.mapType = this._bingMap.current.getMapTypeId();
+
+    };
+
 
     searched_pin: any;
     /*
@@ -691,13 +708,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         const location = await this.bingGeocode(this._bingMap, this.bingSearchBarContents);
         this.dataDoc.latitude = location.latitude;
         this.dataDoc.longitude = location.longitude;
+        this.dataDoc.zoom = this._bingMap.current.getZoom();
+        // this.dataDoc.mapType = this._bingMap.current.getMapTypeId();
+        // this.bingSearchBarContents=location.name;
+
         // Centers on the searched location
-        this._bingMap.current.setView({
-            center: new this.MicrosoftMaps.Location(this.dataDoc.latitude, this.dataDoc.longitude),
-        });
-        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick);
-        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'viewchangeend', this.updateLayout);
+        this._bingMap.current.panTo(new this.MicrosoftMaps.Location(this.dataDoc.latitude, this.dataDoc.longitude));
 
+        // this._bingMap.current.setView({
+        //     center: new this.MicrosoftMaps.Location(this.dataDoc.latitude, this.dataDoc.longitude),
+        // });
+        
+        
 
         
         // Creates a temporary pin but does not add it to the dataDoc
@@ -714,12 +736,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     /**
      * Adds all pushpins in dataDoc onto the map (render) - OLD & UNUSED
      */
-    @action
-    addAllPins = () => {
-        this._bingMap.current.entities.clear();
-        if (this.searched_pin) this._bingMap.current.entities.push(this.searched_pin);
-        // this.allMapPushpins.map(pin => this.addPushpin(pin));
-    };
+    // @action
+    // addAllPins = () => {
+    //     this._bingMap.current.entities.clear();
+    //     if (this.searched_pin) this._bingMap.current.entities.push(this.searched_pin);
+    //     // this.allMapPushpins.map(pin => this.addPushpin(pin));
+    // };
 
     /*
      * Returns doc w/ relevant info
@@ -730,7 +752,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 title: 'MapAnchor:' + this.rootDoc.title,
                 presLat: NumCast(this.dataDoc.latitude),
                 presLong: NumCast(this.dataDoc.longitude),
-                // presTransition: 1000,
+                presZoom: NumCast(this.dataDoc.zoom),
+                presMapType: this.dataDoc.mapType,
+                // presType: 
                 unrendered: true,
                 annotationOn: this.rootDoc,
             });
@@ -764,8 +788,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     */
     @action
     removePushpin = (pin:any)=>{
-        this._bingMap.current.entities.clear();
-        this.allMapPushpins
+        // this._bingMap.current.entities.clear();
+        // this.allMapPushpins
         this.allMapPushpins.map(pin => this.addPushpin(pin));
     }
 
@@ -798,7 +822,19 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         else this.placePinOn = true;
     };
 
-    bingMapReady = (map: any) => (this._bingMap = map.map);
+    /*
+     * Called when BingMap is first rendered 
+     * Initializes starting values
+     */
+    bingMapReady = (map: any) => {
+        this._bingMap = map.map;
+        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick);
+        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'viewchangeend', this.updateLayout);
+        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'maptypechanged', this.updateMapType);
+        this.updateLayout();
+        this.updateMapType();
+    }
+        
     render() {
         const renderAnnotations = (docFilters?: () => string[]) => null;
         return (
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index d1cfb86ae..0a907c958 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -464,7 +464,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             }
             if (bestTarget.longitude !== activeItem.presLong) {
                 Doc.SetInPlace(bestTarget, "longitude", NumCast(activeItem.presLong), true);
-                bestTarget.restoreTargetOn = true;
+                changed = true;
+            }
+            if (bestTarget.zoom !== activeItem.presZoom) {
+                Doc.SetInPlace(bestTarget, "zoom", NumCast(activeItem.presZoom), true);
+                changed = true;
+            }
+            if (bestTarget.mapType !== activeItem.presMapType) {
+                Doc.SetInPlace(bestTarget, "mapType", StrCast(activeItem.presMapType), true);
                 changed = true;
             }
         }
-- 
cgit v1.2.3-70-g09d2


From 98d40d63fce7e63bce264b07dbb433dfe2b88d0c Mon Sep 17 00:00:00 2001
From: Eric <ericmabr@gmail.com>
Date: Tue, 15 Aug 2023 14:40:56 -0400
Subject: Freeze

---
 package-lock.json                         | 97 +++++++++++++++++++++++++++++--
 src/client/views/nodes/DocumentView.tsx   |  2 +-
 src/client/views/nodes/MapBox/MapBox.scss |  4 ++
 src/client/views/nodes/MapBox/MapBox.tsx  | 56 ++++++++++++++----
 src/client/views/nodes/trails/PresBox.tsx |  1 +
 5 files changed, 143 insertions(+), 17 deletions(-)

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/package-lock.json b/package-lock.json
index a62b3306c..e79d94b3a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6507,9 +6507,9 @@
             }
         },
         "browndash-components": {
-            "version": "0.0.92",
-            "resolved": "https://registry.npmjs.org/browndash-components/-/browndash-components-0.0.92.tgz",
-            "integrity": "sha512-eE/6WQNZiLnaXUKyoaMm0PDYjExUsFJ9VTAIIxROpYPosIBKWNZ743xaOfmehib5us9hEXJb0CvUFJQb8rzDVw==",
+            "version": "0.0.93",
+            "resolved": "https://registry.npmjs.org/browndash-components/-/browndash-components-0.0.93.tgz",
+            "integrity": "sha512-JL9Hi7Nq+zHZtjLCQSuGhID0Hd7X6sARutyJqbECfsLWACsIC/JfeEQZdUeH5CqO+R7pJKeoWM82AIkWGtN2Xw==",
             "requires": {
                 "@emotion/react": "^11.11.1",
                 "@emotion/styled": "^11.11.0",
@@ -7063,12 +7063,97 @@
                                         "strip-ansi": "^7.0.1"
                                     }
                                 },
+                                "string-width-cjs": {
+                                    "version": "npm:string-width@4.2.3",
+                                    "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+                                    "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+                                    "requires": {
+                                        "emoji-regex": "^8.0.0",
+                                        "is-fullwidth-code-point": "^3.0.0",
+                                        "strip-ansi": "^6.0.1"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        },
+                                        "emoji-regex": {
+                                            "version": "8.0.0",
+                                            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+                                            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+                                        },
+                                        "strip-ansi": {
+                                            "version": "6.0.1",
+                                            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                            "requires": {
+                                                "ansi-regex": "^5.0.1"
+                                            }
+                                        }
+                                    }
+                                },
                                 "strip-ansi": {
                                     "version": "7.1.0",
                                     "bundled": true,
                                     "requires": {
                                         "ansi-regex": "^6.0.1"
                                     }
+                                },
+                                "strip-ansi-cjs": {
+                                    "version": "npm:strip-ansi@6.0.1",
+                                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                    "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                    "requires": {
+                                        "ansi-regex": "^5.0.1"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        }
+                                    }
+                                },
+                                "wrap-ansi-cjs": {
+                                    "version": "npm:wrap-ansi@7.0.0",
+                                    "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+                                    "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+                                    "requires": {
+                                        "ansi-styles": "^4.0.0",
+                                        "string-width": "^4.1.0",
+                                        "strip-ansi": "^6.0.0"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        },
+                                        "emoji-regex": {
+                                            "version": "8.0.0",
+                                            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+                                            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+                                        },
+                                        "string-width": {
+                                            "version": "4.2.3",
+                                            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+                                            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+                                            "requires": {
+                                                "emoji-regex": "^8.0.0",
+                                                "is-fullwidth-code-point": "^3.0.0",
+                                                "strip-ansi": "^6.0.1"
+                                            }
+                                        },
+                                        "strip-ansi": {
+                                            "version": "6.0.1",
+                                            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                            "requires": {
+                                                "ansi-regex": "^5.0.1"
+                                            }
+                                        }
+                                    }
                                 }
                             }
                         },
@@ -8573,7 +8658,7 @@
                             }
                         },
                         "string-width-cjs": {
-                            "version": "npm:string-width@4.2.3",
+                            "version": "npm:string-width-cjs@4.2.3",
                             "bundled": true,
                             "requires": {
                                 "emoji-regex": "^8.0.0",
@@ -8596,7 +8681,7 @@
                             }
                         },
                         "strip-ansi-cjs": {
-                            "version": "npm:strip-ansi@6.0.1",
+                            "version": "npm:strip-ansi-cjs@6.0.1",
                             "bundled": true,
                             "requires": {
                                 "ansi-regex": "^5.0.1"
@@ -8755,7 +8840,7 @@
                             }
                         },
                         "wrap-ansi-cjs": {
-                            "version": "npm:wrap-ansi@7.0.0",
+                            "version": "npm:wrap-ansi-cjs@7.0.0",
                             "bundled": true,
                             "requires": {
                                 "ansi-styles": "^4.0.0",
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index bb9f45bdd..419800ad5 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1626,4 +1626,4 @@ ScriptingGlobals.add(function updateLinkCollection(linkCollection: Doc, linkSour
     });
     embedding && DocServer.UPDATE_SERVER_CACHE(); // if a new embedding was made, update the client's server cache so that it will not come back as a promise
     return links;
-});
+});
\ No newline at end of file
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index 539c506c7..fcd4fc9be 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -11,6 +11,10 @@
         padding: 12;
         font-size: 17;
     }
+    .mapBox-topbar{
+        display:flex;
+        flex-direction: row;
+    }
 
     .mapBox-overlayButton-sidebar {
         background: #121721;
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>
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index c0cd3ab70..76f42778b 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -52,6 +52,7 @@ export interface pinDataTypes {
     dataview?: boolean;
     poslayoutview?: boolean;
     dataannos?: boolean;
+    map?: boolean;
 }
 export interface PinProps {
     audioRange?: boolean;
-- 
cgit v1.2.3-70-g09d2


From eb35837e5ffe8e7eba9decea1fae5c163528dc1e Mon Sep 17 00:00:00 2001
From: Eric <ericmabr@gmail.com>
Date: Mon, 21 Aug 2023 11:59:05 -0400
Subject: Buggy

---
 src/client/documents/Documents.ts               |   5 +-
 src/client/views/nodes/MapBox/MapBox.scss       |   4 +
 src/client/views/nodes/MapBox/MapBox.tsx        | 201 +++++++++++++-----------
 src/client/views/nodes/MapBox/MapPushpinBox.tsx |   4 +-
 src/client/views/nodes/trails/PresBox.tsx       |   5 +-
 5 files changed, 120 insertions(+), 99 deletions(-)

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index af4cf2243..eb777aae2 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -368,8 +368,6 @@ export class DocumentOptions {
     waitForDoubleClickToClick?: 'always' | 'never' | 'default'; // whether a click function wait for double click to expire.  'default' undefined = wait only if there's a click handler, "never" = never wait, "always" = alway wait
     onPointerDown?: ScriptField;
     onPointerUp?: ScriptField;
-    openFactoryLocation?: string; // an OpenWhere value to place the factory created document
-    openFactoryAsDelegate?: BOOLt = new BoolInfo('create a delegate of the factory');
     _forceActive?: BOOLt = new BoolInfo('flag to handle pointer events when not selected (or otherwise active)');
     _dragOnlyWithinContainer?: BOOLt = new BoolInfo('whether the document should remain in its collection when someone tries to drag and drop it elsewhere');
     _raiseWhenDragged?: BOOLt = new BoolInfo('whether a document is brought to front when dragged.');
@@ -381,7 +379,6 @@ export class DocumentOptions {
     cloneFieldFilter?: List<string>; // fields not to copy when the document is clonedclipboard?: Doc;
     dragWhenActive?: BOOLt = new BoolInfo('should document drag when it is active - e.g., pileView, group');
     dragAction?: DROPt = new DAInfo('how to drag document when it is active (e.g., tree, groups)');
-    dragFactory_count?: NUMt = new NumInfo('number of items created from a drag button (used for setting title with incrementing index)', true);
     dragFactory?: Doc; // document to create when dragging with a suitable onDragStart script
     clickFactory?: Doc; // document to create when clicking on a button with a suitable onClick script
     onDragStart?: ScriptField; //script to execute at start of drag operation --  e.g., when a "creator" button is dragged this script generates a different document to drop
@@ -1104,7 +1101,7 @@ export namespace Docs {
             );
         }
         export function MapanchorDocument(options: DocumentOptions = {}, id?: string) {
-            return InstanceFromProto(Prototypes.get(DocumentType.MARKER), options?.data, options, id);
+            return InstanceFromProto(Prototypes.get(DocumentType.MAP), options?.data, options, id);
         }
 
         export function LinearDocument(documents: Array<Doc>, options: DocumentOptions, id?: string) {
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index fcd4fc9be..39fa3262e 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -11,6 +11,10 @@
         padding: 12;
         font-size: 17;
     }
+    .mapBox-searchbar{
+        display:flex;
+        flex-direction: row;
+    }
     .mapBox-topbar{
         display:flex;
         flex-direction: row;
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 283d57bb6..bad1a3ebd 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, Toggle } from 'browndash-components';
+import { EditableText, IconButton, Toggle, Type } from 'browndash-components';
 import e from 'connect-flash';
 import { truncateSync } from 'fs';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
@@ -13,12 +13,12 @@ import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { ScriptField } from '../../../../fields/ScriptField';
 import { NumCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, returnAll, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { emptyFunction, returnAll, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnIgnore, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils';
 import { Docs } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
 import { SnappingManager } from '../../../util/SnappingManager';
 import { Transform } from '../../../util/Transform';
-import { UndoManager } from '../../../util/UndoManager';
+import { undoable, UndoManager } from '../../../util/UndoManager';
 import { MarqueeOptionsMenu } from '../../collections/collectionFreeForm';
 import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent';
 import { Colors } from '../../global/globalEnums';
@@ -116,7 +116,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @observable private _marqueeing: number[] | undefined;
     @observable private inputRef = React.createRef<HTMLInputElement>();
     @observable private searchMarkers: google.maps.Marker[] = [];
-    // @observable private searchBox = new window.google.maps.places.Autocomplete(this.inputRef.current!, options);
+    @observable private searchBox =  undefined as any; //  new window.google.maps.places.Autocomplete(this.inputRef.current!, options);
     @observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
     @computed get allSidebarDocs() {
         return DocListCast(this.dataDoc[this.SidebarKey]);
@@ -138,45 +138,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     private _ref: React.RefObject<HTMLDivElement> = React.createRef();
     private _disposer: {[key:string]:IReactionDisposer} = {}
     componentDidMount() {
-        this.props.setContentView?.(this);
-        this._disposer.location = reaction(() => ({lat:this.rootDoc.latitude, lng:this.rootDoc.longitude, zoom:this.rootDoc.zoom,mapType:this.rootDoc.mapType}), 
-        (locationObject) => {
-
-            this._bingMap.current.setView({
-                mapTypeId: locationObject.mapType,
-                zoom:locationObject.zoom,
-                center: new this.MicrosoftMaps.Location(locationObject.lat, locationObject.lng),
-            });
-
-        }, {fireImmediately: true});
-        // this._disposer.pins = reaction(() => ({pinList:this.dataDoc[this.annotationKey]}), 
-        // (pinsObject) => {
-        //     this._bingMap.current.entities.clear();
-        //     pinsObject.pinList.map((pushpin: Doc) => (
-        //                         <DocumentView
-        //                             {...this.props}
-        //                             Document={pushpin}
-        //                             DataDoc={undefined}
-        //                             PanelWidth={returnOne}
-        //                             PanelHeight={returnOne}
-        //                             NativeWidth={returnOne} 
-        //                             NativeHeight={returnOne}
-        //                             onClick={()=>new ScriptField(undefined)}
-        //                             onKey={undefined}
-        //                             onDoubleClick={undefined}
-        //                             onBrowseClick={undefined}
-        //                             docFilters={returnEmptyDoclist}
-        //                             docRangeFilters={returnEmptyDoclist}
-        //                             searchFilterDocs={returnEmptyDoclist}
-        //                             isDocumentActive={returnFalse}
-        //                             isContentActive={returnFalse}
-        //                             addDocTab={returnFalse}
-        //                             ScreenToLocalTransform={()=>new Transform(0,0,0)}
-        //                             fitContentsToBox={undefined}
-        //                             focus={returnOne}
-        //                 />));
-
-        // }, {fireImmediately: false});
 
         
     }
@@ -638,7 +599,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      *
      *
      **/
-
+    @observable
     bingSearchBarContents: any = 'Boston, MA'; // For Bing Maps: The contents of the Bing search bar (string)
 
     geoDataRequestOptions = {
@@ -675,7 +636,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * Pushpin onclick
      */
     @action
-    pushpinClicked = (pinDoc:Doc,pin:any) => {
+    pushpinClicked = (pinDoc:Doc) => {
         // TODO:
         // if (sidebarannos is not open) open sidebarannos
         // creates button onclick removes the doc from annotations
@@ -685,27 +646,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.dataDoc.longitude = pinDoc.lng;
 
         
-
-
-    //     @action
-    // onPointerDown = (e: React.PointerEvent) => {
-    //     if (e.button === 2 || e.ctrlKey) {
-    //         AnchorMenu.Instance.Status = 'annotation';
-    //         AnchorMenu.Instance.Delete = this.deleteAnnotation.bind(this);
-    //         AnchorMenu.Instance.Pinned = false;
-    //         AnchorMenu.Instance.PinToPres = this.pinToPres;
-    //         AnchorMenu.Instance.MakeTargetToggle = this.makeTargretToggle;
-    //         AnchorMenu.Instance.IsTargetToggler = this.isTargetToggler;
-    //         AnchorMenu.Instance.ShowTargetTrail = () => this.showTargetTrail(this.annoTextRegion);
-    //         AnchorMenu.Instance.jumpTo(e.clientX, e.clientY, true);
-    //         e.stopPropagation();
-    //     } else if (e.button === 0) {
-    //         e.stopPropagation();
-    //         LinkFollower.FollowLink(undefined, this.annoTextRegion, false);
-    //     }
-    // };
-
-        // TODO: UPDATE FOR DASHDOC SELECTION
     };
 
     /**
@@ -811,10 +751,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 presLat: NumCast(this.dataDoc.latitude),
                 presLong: NumCast(this.dataDoc.longitude),
                 presZoom: NumCast(this.dataDoc.zoom),
-                presMapType: this.dataDoc.mapType,
+                presMapType: StrCast(this.dataDoc.mapType),
                 // preslocationToLookAt:this.dataDoc.locationToLookAt,
                 // presType: 
-                unrendered: true,
+                layout_unrendered: true,
                 annotationOn: this.rootDoc,
             });
         if (anchor) {
@@ -839,7 +779,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, 'click', (e: any) => this.pushpinClicked(pin));
         this.MicrosoftMaps.Events.addHandler(pushPin, 'dblclick', (e: any) => this.pushpinDblClicked(pushPin, pin));
     }
 
@@ -876,7 +816,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * Map options
      */
     bingMapOptions = {
-        navigationBarMode: 'compact',
+        navigationBarMode: 'square',
         backgroundColor: '#f1f3f4',
         enableInertia: true,
         supportedMapTypes:['grayscale', 'canvasLight'],
@@ -901,19 +841,71 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         else this.placePinOn = true;
     };
 
+    @action
+    searchbarOnEdit=(newText:string)=>{
+        this.bingSearchBarContents = newText
+    }
+
     /*
      * Called when BingMap is first rendered 
      * Initializes starting values
      */
     bingMapReady = (map: any) => {
         this._bingMap = map.map;
-        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick);
-        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'viewchangeend', this.updateLayout);
-        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'maptypechanged', this.updateMapType);
-        this.updateLayout();
-        this.updateMapType();
+        if (!this._bingMap.current) {
+            alert("NO Map!?")
+        }
+        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', undoable(this.mapOnClick, "Added Pin to Map"));
+        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'viewchangeend', undoable(this.updateLayout, "Map Layout Change"));
+        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'maptypechanged', undoable(this.updateMapType, "Map ViewType Change"));
+        //this.updateLayout();
+       // this.updateMapType();
+        this.props.setContentView?.(this);
+        this._disposer.location = reaction(() => ({lat:this.rootDoc.latitude, lng:this.rootDoc.longitude, zoom:this.rootDoc.zoom,mapType:this.rootDoc.mapType}), 
+        (locationObject) => {
+            // if (this._bingMap.current)
+                this._bingMap.current?.setView({
+                    mapTypeId: locationObject.mapType,
+                    zoom:locationObject.zoom,
+                    center: new this.MicrosoftMaps.Location(locationObject.lat, locationObject.lng),
+                });
+
+        }, {fireImmediately: true});
+        // this._disposer.pins = reaction(() => ({pinList:this.dataDoc[this.annotationKey]}), 
+        // (pinsObject) => {
+        //     this._bingMap.current.entities.clear();
+        //     pinsObject.pinList.map((pushpin: Doc) => (
+        //                         <DocumentView
+        //                             {...this.props}
+        //                             Document={pushpin}
+        //                             DataDoc={undefined}
+        //                             PanelWidth={returnOne}
+        //                             PanelHeight={returnOne}
+        //                             NativeWidth={returnOne} 
+        //                             NativeHeight={returnOne}
+        //                             onClick={()=>new ScriptField(undefined)}
+        //                             onKey={undefined}
+        //                             onDoubleClick={undefined}
+        //                             onBrowseClick={undefined}
+        //                             docFilters={returnEmptyDoclist}
+        //                             docRangeFilters={returnEmptyDoclist}
+        //                             searchFilterDocs={returnEmptyDoclist}
+        //                             isDocumentActive={returnFalse}
+        //                             isContentActive={returnFalse}
+        //                             addDocTab={returnFalse}
+        //                             ScreenToLocalTransform={()=>new Transform(0,0,0)}
+        //                             fitContentsToBox={undefined}
+        //                             focus={returnOne}
+        //                 />));
+
+        // }, {fireImmediately: false});
+    }
+    searchbarKeyDown = (e:any)=>{
+        if (e.key === 'Enter') {
+            this.bingSearch()
+          }
+            
     }
-        
     render() {
         const renderAnnotations = (childFilters?: () => string[]) => null;
         return (
@@ -937,9 +929,44 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     {SnappingManager.GetIsDragging() ? null : renderAnnotations()}
                     {this.annotationLayer}
 
-                    <EditableText setEditing={(isEditing: boolean) => ({})} editing onEdit={(newText: string) => (this.bingSearchBarContents = newText)} placeholder="Boston, MA" text="Boston, MA" />
+
+                    <div className='mapBox-searchbar'>
+                        <EditableText 
+                            // editing 
+                            setVal={(newText:string|number) => typeof newText === "string" && this.searchbarOnEdit(newText)}
+                            placeholder="Boston" 
+                            // text="text" 
+                            />
+                        <IconButton
+                        icon={<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" color="#DFDFDF"><path fill="currentColor" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg>}
+                        onClick={this.bingSearch}
+                        onDoubleClick={function noRefCheck(){}}
+                        onPointerDown={function noRefCheck(){}}
+                        onPointerDownCapture={function noRefCheck(){}}
+                        onPointerMove={function noRefCheck(){}}
+                        onPointerMoveCapture={function noRefCheck(){}}
+                        onPointerUp={function noRefCheck(){}}
+                        type={Type.TERT}
+                        />
+                        <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>
+                    
+                    
                     <div className='mapBox-topbar'>
-                        <input type="button" value="Search" onClick={this.bingSearch} />
+                        {/* <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} />}
@@ -957,19 +984,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             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>
                     
 
@@ -992,8 +1007,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                                     onKey={undefined}
                                     onDoubleClick={undefined}
                                     onBrowseClick={undefined}
-                                    docFilters={returnEmptyDoclist}
-                                    docRangeFilters={returnEmptyDoclist}
+                                    childFilters={returnEmptyFilter}
+                                    childFiltersByRanges={returnEmptyFilter}
                                     searchFilterDocs={returnEmptyDoclist}
                                     isDocumentActive={returnFalse}
                                     isContentActive={returnFalse}
diff --git a/src/client/views/nodes/MapBox/MapPushpinBox.tsx b/src/client/views/nodes/MapBox/MapPushpinBox.tsx
index 588bddd1a..6369f9e04 100644
--- a/src/client/views/nodes/MapBox/MapPushpinBox.tsx
+++ b/src/client/views/nodes/MapBox/MapPushpinBox.tsx
@@ -5,6 +5,7 @@ import { FieldView, FieldViewProps } from '../FieldView';
 import React = require('react');
 import { computed } from 'mobx';
 import { MapBox } from './MapBox';
+import { undoable } from '../../../util/UndoManager';
 
 
 /**
@@ -18,7 +19,8 @@ export class MapPushpinBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return FieldView.LayoutString(MapPushpinBox, fieldKey);
     }
     componentDidMount() {
-        this.mapBoxView.addPushpin(this.rootDoc);
+        // if (this.mapBoxView)
+            this.mapBoxView.addPushpin(this.rootDoc);
     }
     componentWillUnmount() {
         // this.mapBoxView.removePushpin(this.rootDoc);
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 76f42778b..1560ce3e1 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -659,7 +659,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 pinDoc.presYRange = undefined; //targetDoc?.yrange;
             }
             if (pinProps.pinData.map) {
-                pinDoc.presLat = targetDoc?.lat;
+                pinDoc.presLat = targetDoc?.latitude;
+                pinDoc.presLong = targetDoc?.longitude;
+                pinDoc.presZoom = targetDoc?.zoom;
+                pinDoc.mapType = targetDoc?.mapType;
                 //...
             }
             if (pinProps.pinData.poslayoutview)
-- 
cgit v1.2.3-70-g09d2


From 2c46608d3207a8463907b0e1904d9b3026d6d1c8 Mon Sep 17 00:00:00 2001
From: Eric <ericmabr@gmail.com>
Date: Sat, 26 Aug 2023 12:33:47 -0400
Subject: Final1

---
 src/client/util/DocumentManager.ts        |  2 +-
 src/client/views/SidebarAnnos.tsx         |  1 +
 src/client/views/nodes/MapBox/MapBox.tsx  | 77 ++++++++++++++++++++++++++-----
 src/client/views/nodes/trails/PresBox.tsx |  4 +-
 4 files changed, 70 insertions(+), 14 deletions(-)

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 7c3b5be05..5b627c2f3 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -310,7 +310,7 @@ export class DocumentManager {
         if (viewSpec && docView) {
             if (docView.ComponentView instanceof FormattedTextBox) docView.ComponentView?.focus(viewSpec, options);
             PresBox.restoreTargetDocView(docView, viewSpec, options.zoomTime ?? 500);
-            Doc.linkFollowHighlight(docView.rootDoc, undefined, options.effect);
+            Doc.linkFollowHighlight(viewSpec ? [docView.rootDoc, viewSpec]: docView.rootDoc, undefined, options.effect);
             if (options.playAudio) DocumentManager.playAudioAnno(docView.rootDoc);
             if (options.toggleTarget && (!options.didMove || docView.rootDoc.hidden)) docView.rootDoc.hidden = !docView.rootDoc.hidden;
             if (options.effect) docView.rootDoc[Animation] = options.effect;
diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx
index 7635d719e..520485a71 100644
--- a/src/client/views/SidebarAnnos.tsx
+++ b/src/client/views/SidebarAnnos.tsx
@@ -87,6 +87,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> {
 
         const taggedContent = this.childFilters()
             .filter(data => data.split(':')[0])
+            .filter(data => data.split(':')[0] !== 'latitude' && data.split(':')[0] !== 'longitude')
             .map(data => {
                 const key = data.split(':')[0];
                 const val = Field.Copy(this.allMetadata.get(key));
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index dbb38e763..93020354d 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -7,7 +7,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { TbHeartMinus } from 'react-icons/tb';
 import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
-import { Width } from '../../../../fields/DocSymbols';
+import { Highlight, Width } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { ScriptField } from '../../../../fields/ScriptField';
@@ -133,6 +133,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     }
 
     componentWillUnmount(): void {
+        this.deselectPin();
         Object.keys(this._disposer).forEach(key => this._disposer[key]?.());
     }
     // iterate allMarkers to size, center, and zoom map to contain all markers
@@ -353,17 +354,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.layoutDoc._width = this.layoutDoc._layout_showSidebar ? NumCast(this.layoutDoc._width) * 1.2 : Math.max(20, NumCast(this.layoutDoc._width) - prevWidth);
     };
 
-    createNoteAnnotation = undoable(() => {
+    createNoteAnnotation = () => {
         !this.layoutDoc.layout_showSidebar && this.toggleSidebar();
-        setTimeout(() =>{
-          const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(false));
-          if (note && this.selectedPin) {
-            note.latitude = this.selectedPin.latitude;
-            note.longitude = this.selectedPin.latitude;
-          }
-        }); // give time for sidebarRef to be created
-    }, "create linked note");
 
+        setTimeout(undoable(() => {
+            const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(false));
+            if (note && this.selectedPin) {
+              note.latitude = this.selectedPin.latitude;
+              note.longitude = this.selectedPin.latitude;
+            }
+          },"create note annotation"))
+    
+    }
     sidebarDown = (e: React.PointerEvent) => {
         setupMoveUpEvents(this, e, this.sidebarMove, emptyFunction, () => setTimeout(this.toggleSidebar), true);
     };
@@ -818,7 +820,60 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
         this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'viewchangeend', undoable(this.updateLayout, 'Map Layout Change'));
         this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'maptypechanged', undoable(this.updateMapType, 'Map ViewType Change'));
-        // this.updateLayout();
+        this.updateLayout();
+        this._disposer.highlight = reaction( () => this.allMapPushpins.map(doc => doc[Highlight]),
+        () => this.allMapPushpins.forEach(doc => {
+
+            // if(doc[Highlight]){
+            //     this.deselectPin();
+            //     this.selectedPin = doc;
+
+            //     Doc.setDocFilter(this.rootDoc, "latitude", this.selectedPin.latitude, "match");
+            //     Doc.setDocFilter(this.rootDoc, "longitude", this.selectedPin.latitude, "match");
+
+            //     this._bingMap.current.entities.remove(this.map_docToPinMap.get(this.selectedPin));
+            //     const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(this.selectedPin.latitude, this.selectedPin.longitude), {
+            //         color: 'green',
+            //     });
+            //     this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(this.selectedPin as Doc));
+            //     this._bingMap.current.entities.push(newpin);
+            //     this.map_docToPinMap.set(this.selectedPin, newpin);
+
+            //     MapAnchorMenu.Instance.Delete = this.deleteSelectedPin;
+            //     MapAnchorMenu.Instance.Center = this.centerOnSelectedPin;
+            //     MapAnchorMenu.Instance.LinkNote = this.createNoteAnnotation;
+            // }
+            // if (doc[Highlight]) {
+            //     this._bingMap.current.entities.remove(this.map_docToPinMap.get(doc));
+            //     const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(doc.latitude, doc.longitude), {
+            //         color: 'orange',
+            //     });
+            //     this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(doc));
+            //     this._bingMap.current.entities.push(newpin);
+            //     this.map_docToPinMap.set(doc, newpin);
+
+            // } 
+            // if (this.map_docToPinMap.get(doc).getColor() == 'orange' && !doc[Highlight]) {
+            //     this._bingMap.current.entities.remove(this.map_docToPinMap.get(doc));
+            //     const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(doc.latitude, doc.longitude), {});
+            //     this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(doc));
+            //     this._bingMap.current.entities.push(newpin);
+            //     this.map_docToPinMap.set(doc, newpin);
+
+            // } 
+            // else if (this.map_docToPinMap.get(doc).getColor() != 'orange' && doc[Highlight]) {
+            //     this._bingMap.current.entities.remove(this.map_docToPinMap.get(doc));
+            //     const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(doc.latitude, doc.longitude), {
+            //         color: 'orange',
+            //     });
+            //     this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(doc));
+            //     this._bingMap.current.entities.push(newpin);
+            //     this.map_docToPinMap.set(doc, newpin);
+            // }
+
+            
+        })
+        , {fireImmediately: true})
         // this.updateMapType();
         this._disposer.location = reaction(
             () => ({ lat: this.rootDoc.latitude, lng: this.rootDoc.longitude, zoom: this.rootDoc.mapZoom, mapType: this.rootDoc.mapType }),
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index a94f1f04b..afd9bccab 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -661,8 +661,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 pinDoc.config_yRange = undefined; //targetDoc?.yrange;
             }
             if (pinProps.pinData.map) {
-                pinDoc.config_latitude = targetDoc?.latitude;
-                pinDoc.config_longitude = targetDoc?.longitude;
+                // pinDoc.config_latitude = targetDoc?.latitude;
+                // pinDoc.config_longitude = targetDoc?.longitude;
                 pinDoc.config_mapZoom = targetDoc?.mapZoom;
                 pinDoc.config_mapType = targetDoc?.mapType;
                 //...
-- 
cgit v1.2.3-70-g09d2


From 0a813fdf7d73018ad5248d87fecbd9e55f3dc2d7 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 26 Aug 2023 21:25:24 -0400
Subject: many fixes to map search bar, dragging pushpin, highlighting pushpins
 on link following

---
 src/client/documents/Documents.ts         |   8 +-
 src/client/views/nodes/MapBox/MapBox.tsx  | 552 +++++++++---------------------
 src/client/views/nodes/MapBox/MapBox2.tsx |   4 +-
 src/client/views/nodes/trails/PresBox.tsx |  16 +-
 4 files changed, 170 insertions(+), 410 deletions(-)

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index af8cc07ed..d5d6fb2ba 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -158,6 +158,7 @@ export class DocumentOptions {
     _dimUnit?: DIMt = new DimInfo("units of collectionMulti{row,col} element's width or height - 'px' or '*' for pixels or relative units");
     latitude?: NUMt = new NumInfo('latitude coordinate for map views');
     longitude?: NUMt = new NumInfo('longitude coordinate for map views');
+    map?: STRt = new StrInfo('text location of map');
     _timecodeToShow?: NUMt = new NumInfo('the time that a document should be displayed (e.g., when an annotation shows up as a video plays)');
     _timecodeToHide?: NUMt = new NumInfo('the time that a document should be hidden');
     _width?: NUMt = new NumInfo('displayed width of a document');
@@ -295,8 +296,9 @@ export class DocumentOptions {
 
     config_latitude?: NUMt = new NumInfo('latitude of a map'); // latitude of a map
     config_longitude?: NUMt = new NumInfo('longitude of map'); // longitude of map
-    config_mapZoom?: NUMt = new NumInfo('zoom of map'); // zoom of map
-    config_mapType?: string;
+    config_map_zoom?: NUMt = new NumInfo('zoom of map'); // zoom of map
+    config_map_type?: string;
+    config_map?: string;
     config_panX?: NUMt = new NumInfo('panX saved as a view spec');
     config_panY?: NUMt = new NumInfo('panY saved as a view spec');
     config_viewScale?: NUMt = new NumInfo('viewScale saved as a view Spec');
@@ -527,7 +529,7 @@ export namespace Docs {
                 DocumentType.MAP,
                 {
                     layout: { view: MapBox, dataField: defaultDataKey },
-                    options: { _height: 600, _width: 800, nativeDimModifiable: true, systemIcon: 'BsFillPinMapFill' },
+                    options: { map: '', _height: 600, _width: 800, nativeDimModifiable: true, systemIcon: 'BsFillPinMapFill' },
                 },
             ],
             [
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 62d622fd6..94944b83d 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1,19 +1,14 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { GoogleMapProps, Marker } from '@react-google-maps/api';
 import BingMapsReact from 'bingmaps-react';
 import { Button, EditableText, IconButton, Type } from 'browndash-components';
-import { docs_v1 } from 'googleapis';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { TbHeartMinus } from 'react-icons/tb';
 import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
 import { Highlight, Width } from '../../../../fields/DocSymbols';
-import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
-import { ScriptField } from '../../../../fields/ScriptField';
 import { DocCast, NumCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnOne, returnTrue, setupMoveUpEvents, Utils } from '../../../../Utils';
 import { Docs } from '../../../documents/Documents';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { DragManager } from '../../../util/DragManager';
@@ -24,9 +19,8 @@ import { MarqueeOptionsMenu } from '../../collections/collectionFreeForm';
 import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent';
 import { Colors } from '../../global/globalEnums';
 import { MarqueeAnnotator } from '../../MarqueeAnnotator';
-import { Annotation } from '../../pdf/Annotation';
 import { SidebarAnnos } from '../../SidebarAnnos';
-import { DocumentView, OpenWhere } from '../DocumentView';
+import { DocumentView } from '../DocumentView';
 import { FieldView, FieldViewProps } from '../FieldView';
 import { PinProps, PresBox } from '../trails';
 import { MapAnchorMenu } from './MapAnchorMenu';
@@ -45,29 +39,8 @@ import './MapBox.scss';
  * A map marker is considered a document that contains a collection with stacking view of documents, it has a lat, lng location, which is passed to Maps API's custom marker (red pin) to be rendered on the google maps
  */
 
-// const _global = (window /* browser */ || global /* node */) as any;
-
-const mapContainerStyle = {
-    height: '100%',
-};
-
-const defaultCenter = {
-    lat: 42.360081,
-    lng: -71.058884,
-};
-
-const mapOptions = {
-    fullscreenControl: false,
-};
-
 const bingApiKey = process.env.BING_MAPS; // if you're running local, get a Bing Maps api key here: https://www.bingmapsportal.com/  and then add it to the .env file in the Dash-Web root directory as: _CLIENT_BING_MAPS=<your apikey>
 
-// const script = document.createElement('script');
-// script.defer = true;
-// script.async = true;
-// script.src = `https://maps.googleapis.com/maps/api/js?key=${bingApiKey}&libraries=places,drawing`;
-// document.head.appendChild(script);
-
 /**
  * Consider integrating later: allows for drawing, circling, making shapes on map
  */
@@ -85,169 +58,49 @@ const bingApiKey = process.env.BING_MAPS; // if you're running local, get a Bing
 // });
 
 @observer
-export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps & Partial<GoogleMapProps>>() {
-    private _dropDisposer?: DragManager.DragDropDisposer;
-    private _disposers: { [name: string]: IReactionDisposer } = {};
-    private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
-    @observable private _overlayAnnoInfo: Opt<Doc>;
-    showInfo = action((anno: Opt<Doc>) => (this._overlayAnnoInfo = anno));
+export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(MapBox, fieldKey);
     }
-    public get SidebarKey() {
-        return this.fieldKey + '_sidebar';
-    }
+    private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
+    private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
+    private _sidebarRef = React.createRef<SidebarAnnos>();
+    private _ref: React.RefObject<HTMLDivElement> = React.createRef();
+    private _disposers: { [key: string]: IReactionDisposer } = {};
     private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean) => void);
-    @computed get inlineTextAnnotations() {
-        return this.allMapMarkers.filter(a => a.text_inlineAnnotations);
-    }
 
-    @observable private _map: google.maps.Map = null as unknown as google.maps.Map;
-    @observable private selectedPlace: Doc | undefined;
-    @observable private markerMap: { [id: string]: google.maps.Marker } = {};
-    @observable private center = navigator.geolocation ? navigator.geolocation.getCurrentPosition : defaultCenter;
     @observable private _marqueeing: number[] | undefined;
-    @observable private inputRef = React.createRef<HTMLInputElement>();
-    @observable private searchMarkers: google.maps.Marker[] = [];
-    @observable private searchBox = undefined as any; //  new window.google.maps.places.Autocomplete(this.inputRef.current!, options);
     @observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
+    @computed get inlineTextAnnotations() {
+        return this.allMapMarkers.filter(a => a.text_inlineAnnotations);
+    }
     @computed get allSidebarDocs() {
         return DocListCast(this.dataDoc[this.SidebarKey]);
     }
     @computed get allMapMarkers() {
         return DocListCast(this.dataDoc[this.annotationKey]);
     }
-    @observable private toggleAddMarker = false;
-    private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
-
     @computed get SidebarShown() {
         return this.layoutDoc._layout_showSidebar ? true : false;
     }
+    @computed get sidebarWidthPercent() {
+        return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%');
+    }
+    @computed get sidebarColor() {
+        return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.props.fieldKey + '_backgroundColor'], '#e4e4e4'));
+    }
+    @computed get SidebarKey() {
+        return this.fieldKey + '_sidebar';
+    }
 
-    static _canAnnotate = true;
-    static _hadSelection: boolean = false;
-    private _sidebarRef = React.createRef<SidebarAnnos>();
-    private _ref: React.RefObject<HTMLDivElement> = React.createRef();
-    private _disposer: { [key: string]: IReactionDisposer } = {};
     componentDidMount() {
         this.props.setContentView?.(this);
     }
 
     componentWillUnmount(): void {
         this.deselectPin();
-        Object.keys(this._disposer).forEach(key => this._disposer[key]?.());
+        Object.keys(this._disposers).forEach(key => this._disposers[key]?.());
     }
-    // iterate allMarkers to size, center, and zoom map to contain all markers
-    private fitBounds = (map: google.maps.Map) => {
-        const curBounds = map.getBounds() ?? new window.google.maps.LatLngBounds();
-        const isFitting = this.allMapMarkers.reduce((fits, place) => fits && curBounds?.contains({ lat: NumCast(place.lat), lng: NumCast(place.lng) }), true as boolean);
-        !isFitting && map.fitBounds(this.allMapMarkers.reduce((bounds, place) => bounds.extend({ lat: NumCast(place.lat), lng: NumCast(place.lng) }), new window.google.maps.LatLngBounds()));
-    };
-
-    /**
-     * Load and render all map markers
-     * @param marker
-     * @param place
-     */
-    @action
-    private markerLoadHandler = (marker: google.maps.Marker, place: Doc) => {
-        place[Id] ? (this.markerMap[place[Id]] = marker) : null;
-    };
-
-    /**
-     * on clicking the map marker, set the selected place to the marker document & set infowindowopen to be true
-     * @param e
-     * @param place
-     */
-    @action
-    private markerClickHandler = (e: google.maps.MapMouseEvent, place: Doc) => {
-        // set which place was clicked
-        this.selectedPlace = place;
-        // place.infoWindowOpen = true;
-    };
-
-    /**
-     * Place the marker on google 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.PushpinDocument(NumCast(position.lat()), NumCast(position.lng()), false, [], {});
-        this.addDocument(mapMarker, this.annotationKey);
-    };
-
-    _loadPending = true;
-
-    @action
-    centered = () => {
-        if (this._loadPending && this._map.getBounds()) {
-            this._loadPending = false;
-            this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map);
-        }
-        this.dataDoc.mapLat = this._map.getCenter()?.lat();
-        this.dataDoc.mapLng = this._map.getCenter()?.lng();
-    };
-
-    @action
-    zoomChanged = () => {
-        if (this._loadPending && this._map.getBounds()) {
-            this._loadPending = false;
-            this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map);
-        }
-        this.dataDoc.mapZoom = this._map.getZoom();
-    };
-
-    /**
-     * function that reads the place inputed from searchbox, then zoom in on the location that's been autocompleted;
-     * add a customized temporary marker on the map
-     */
-    @action
-    private handlePlaceChanged = () => {
-        const place = this.searchBox.getPlace();
-
-        if (!place.geometry || !place.geometry.location) {
-            // user entered the name of a place that wasn't suggested & pressed the enter key, or place details request failed
-            window.alert("No details available for input: '" + place.name + "'");
-            return;
-        }
-
-        // zoom in on the location of the search result
-        if (place.geometry.viewport) {
-            this._map.fitBounds(place.geometry.viewport);
-        } else {
-            this._map.setCenter(place.geometry.location);
-            this._map.setZoom(17);
-        }
-
-        // customize icon => customized icon for the nature of the location selected
-        const icon = {
-            url: place.icon as string,
-            size: new google.maps.Size(71, 71),
-            origin: new google.maps.Point(0, 0),
-            anchor: new google.maps.Point(17, 34),
-            scaledSize: new google.maps.Size(25, 25),
-        };
-
-        // put temporary cutomized marker on searched location
-        this.searchMarkers.forEach(marker => {
-            marker.setMap(null);
-        });
-        this.searchMarkers = [];
-        this.searchMarkers.push(
-            new window.google.maps.Marker({
-                map: this._map,
-                icon,
-                title: place.name,
-                position: place.geometry.location,
-            })
-        );
-    };
 
     /**
      * Called when dragging documents into map sidebar or directly into infowindow; to create a map marker, ref to MapMarkerDocument in Documents.ts
@@ -256,7 +109,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * @returns
      */
     sidebarAddDocument = (doc: Doc | Doc[], sidebarKey?: string) => {
-        console.log('print all sidebar Docs');
         if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar();
         const docs = doc instanceof Doc ? [doc] : doc;
         docs.forEach(doc => {
@@ -280,11 +132,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * @param sidebarKey
      * @returns
      */
-    sidebarRemoveDocument = (doc: Doc | Doc[], sidebarKey?: string) => {
-        // if (this.layoutDoc._layout_showSidebar) this.toggleSidebar();
-        const docs = doc instanceof Doc ? [doc] : doc;
-        return this.removeDocument(doc, sidebarKey);
-    };
+    sidebarRemoveDocument = (doc: Doc | Doc[], sidebarKey?: string) => this.removeDocument(doc, sidebarKey);
 
     /**
      * Toggle sidebar onclick the tiny comment button on the top right corner
@@ -317,14 +165,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             () => UndoManager.RunInBatch(this.toggleSidebar, 'toggle sidebar map')
         );
     };
-
-    sidebarWidth = () => (Number(this.layout_sidebarWidthPercent.substring(0, this.layout_sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth();
-    @computed get layout_sidebarWidthPercent() {
-        return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%');
-    }
-    @computed get sidebarColor() {
-        return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.props.fieldKey + '_backgroundColor'], '#e4e4e4'));
-    }
+    sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth();
 
     /**
      * Handles toggle of sidebar on click the little comment button
@@ -349,27 +190,27 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     // TODO: Adding highlight box layer to Maps
     @action
     toggleSidebar = () => {
-        //1.2 * w * ? = .2 * w      .2/1.2
         const prevWidth = this.sidebarWidth();
         this.layoutDoc._layout_showSidebar = (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? `${(100 * 0.2) / 1.2}%` : '0%') !== '0%';
         this.layoutDoc._width = this.layoutDoc._layout_showSidebar ? NumCast(this.layoutDoc._width) * 1.2 : Math.max(20, NumCast(this.layoutDoc._width) - prevWidth);
     };
 
     createNoteAnnotation = () => {
-        !this.layoutDoc.layout_showSidebar && this.toggleSidebar();
-
-        setTimeout(
-            undoable(
-                action(() => {
-                    const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(false));
-                    if (note && this.selectedPin) {
-                        note.latitude = this.selectedPin.latitude;
-                        note.longitude = this.selectedPin.latitude;
-                    }
-                }),
-                'create note annotation'
-            )
+        const createFunc = undoable(
+            action(() => {
+                const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(false));
+                if (note && this.selectedPin) {
+                    note.latitude = this.selectedPin.latitude;
+                    note.longitude = this.selectedPin.longitude;
+                    note.map = this.selectedPin.map;
+                }
+            }),
+            'create note annotation'
         );
+        if (!this.layoutDoc.layout_showSidebar) {
+            this.toggleSidebar();
+            setTimeout(createFunc);
+        } else createFunc();
     };
     sidebarDown = (e: React.PointerEvent) => {
         setupMoveUpEvents(this, e, this.sidebarMove, emptyFunction, () => setTimeout(this.toggleSidebar), true);
@@ -406,37 +247,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         x !== undefined && y !== undefined && this._setPreviewCursor?.(x, y, false, false);
     };
 
-    addDocumentWrapper = (doc: Doc | Doc[], annotationKey?: string) => {
-        return this.addDocument(doc, annotationKey);
-    };
+    addDocumentWrapper = (doc: Doc | Doc[], annotationKey?: string) => this.addDocument(doc, annotationKey);
 
     pointerEvents = () => (this.props.isContentActive() && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : 'none');
 
-    @computed get annotationLayer() {
-        return (
-            <div className="mapBox-annotationLayer" style={{ height: Doc.NativeHeight(this.Document) || undefined }} ref={this._annotationLayer}>
-                {this.inlineTextAnnotations
-                    .sort((a, b) => NumCast(a.y) - NumCast(b.y))
-                    .map(anno => (
-                        <Annotation key={`${anno[Id]}-annotation`} {...this.props} fieldKey={this.annotationKey} pointerEvents={this.pointerEvents} showInfo={this.showInfo} dataDoc={this.dataDoc} anno={anno} />
-                    ))}
-            </div>
-        );
-    }
-
-    // Old get anchor function
-    // 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
-     */
-    private renderMarkers = () => {
-        return this.allMapMarkers.map(place => (
-            <Marker key={place[Id]} position={{ lat: NumCast(place.lat), lng: NumCast(place.lng) }} onLoad={marker => this.markerLoadHandler(marker, place)} onClick={(e: google.maps.MapMouseEvent) => this.markerClickHandler(e, place)} />
-        ));
-    };
-
     panelWidth = () => this.props.PanelWidth() / (this.props.NativeDimScaling?.() || 1) - this.sidebarWidth();
     panelHeight = () => this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1);
     scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop));
@@ -473,25 +287,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             } else {
                 this._bingSearchManager.geocode({
                     where: query,
-                    callback: action((r: any) => {
-                        res(r.results[0].location);
-                    }),
+                    callback: action((r: any) => res(r.results[0].location)),
                     errorCallback: (e: any) => reject(),
                 });
             }
         });
     };
 
-    /**
-     *
-     *
-     *  ERIC'S BING MAP CODE BELOW
-     *
-     *
-     *
-     **/
     @observable
-    bingSearchBarContents: any = 'enter city/zip/...'; // For Bing Maps: The contents of the Bing search bar (string)
+    bingSearchBarContents: any = this.rootDoc.map; // For Bing Maps: The contents of the Bing search bar (string)
 
     geoDataRequestOptions = {
         entityType: 'PopulatedPlace',
@@ -502,14 +306,14 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * Creates Pushpin doc and adds it to the list of annotations
      */
     @action
-    createPushpin = undoable((latitude: number, longitude: number) => {
+    createPushpin = undoable((latitude: number, longitude: number, map?: string) => {
         // Stores the pushpin as a MapMarkerDocument
         const mapMarker = Docs.Create.PushpinDocument(
             NumCast(latitude),
             NumCast(longitude),
             false,
             [],
-            {}
+            { map: map }
             // ,'pushpinIDamongus'+ this.incrementer++
         );
         this.addDocument(mapMarker, this.annotationKey);
@@ -517,18 +321,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         // mapMarker.infoWindowOpen = true;
     }, 'createpin');
 
-    /*
-     * Pushpin dblclick
-     */
-    // @action
-    // pushpinDblClicked = (pin: any, pinDoc?: Doc) => {
-    //     if (pinDoc) this.removePushpin(pinDoc);
-    //     else this._bingMap.current.entities.remove(pin);
-    // };
-
     // The pin that is selected
-    @observable
-    selectedPin: Doc | undefined;
+    @observable selectedPin: Doc | undefined;
 
     @action
     deselectPin = () => {
@@ -544,6 +338,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             this._bingMap.current.entities.push(newpin);
             this.map_docToPinMap.set(temp, newpin);
             this.selectedPin = undefined;
+            this.bingSearchBarContents = this.rootDoc.map;
         }
     };
 
@@ -558,9 +353,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     pushpinClicked = (pinDoc: Doc) => {
         this.deselectPin();
         this.selectedPin = pinDoc;
+        this.bingSearchBarContents = pinDoc.map;
 
         Doc.setDocFilter(this.rootDoc, 'latitude', this.selectedPin.latitude, 'match');
-        Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPin.latitude, 'match');
+        Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPin.longitude, 'match');
 
         this.recolorPin(this.selectedPin, 'green');
 
@@ -575,7 +371,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         MapAnchorMenu.Instance.jumpTo(cpt[0], cpt[1], true);
 
         document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
-        // Filter sidebar:
     };
 
     /**
@@ -589,54 +384,47 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * Map OnClick
      */
     @action
-    mapOnClick = (e: { location: { latitude: any; longitude: any } }) => this.deselectPin();
+    mapOnClick = (e: { location: { latitude: any; longitude: any } }) => {
+        this.props.select(false);
+        this.deselectPin();
+    };
     /*
      * Updates values of layout doc to match the current map
      */
     @action
-    updateLayout = () => {
-        this.dataDoc.latitude = this._bingMap.current.getCenter().latitude;
-        this.dataDoc.longitude = this._bingMap.current.getCenter().longitude;
-        this.dataDoc.mapZoom = this._bingMap.current.getZoom();
-        // if(this.dataDoc.mapType == 'x'){
-        //     this.dataDoc.locationToLookAt
-        // }
-        // this.dataDoc.mapType = new this.MicrosoftMaps.MapTypeId();
+    mapRecentered = () => {
+        if (
+            Math.abs(NumCast(this.dataDoc.latitude) - this._bingMap.current.getCenter().latitude) > 1e-7 || //
+            Math.abs(NumCast(this.dataDoc.longitude) - this._bingMap.current.getCenter().longitude) > 1e-7
+        ) {
+            this.dataDoc.latitude = this._bingMap.current.getCenter().latitude;
+            this.dataDoc.longitude = this._bingMap.current.getCenter().longitude;
+            this.dataDoc.map = '';
+            this.bingSearchBarContents = '';
+        }
+        this.dataDoc.map_zoom = this._bingMap.current.getZoom();
     };
     /*
      * Updates maptype
      */
     @action
-    updateMapType = () => {
-        this.dataDoc.mapType = this._bingMap.current.getMapTypeId();
-    };
+    updateMapType = () => (this.dataDoc.map_type = this._bingMap.current.getMapTypeId());
 
-    searched_pin: any;
     /*
      * 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.dataDoc.latitude = location.latitude;
-        this.dataDoc.longitude = location.longitude;
-        this.dataDoc.mapZoom = this._bingMap.current.getZoom();
-        // Creates a temporary pin but does not add it to the dataDoc
-        this.createPushpin(this.dataDoc.latitude, this.dataDoc.longitude);
+    bingSearch = () => {
+        return this.bingGeocode(this._bingMap, this.bingSearchBarContents).then(location => {
+            this.dataDoc.latitude = location.latitude;
+            this.dataDoc.longitude = location.longitude;
+            this.dataDoc.map_zoom = this._bingMap.current.getZoom();
+            this.dataDoc.map = this.bingSearchBarContents;
+        });
     };
 
-    /**
-     * Adds all pushpins in dataDoc onto the map (render) - OLD & UNUSED
-     */
-    // @action
-    // addAllPins = () => {
-    //     this._bingMap.current.entities.clear();
-    //     if (this.searched_pin) this._bingMap.current.entities.push(this.searched_pin);
-    //     // this.allMapPushpins.map(pin => this.addPushpin(pin));
-    // };
-
     /*
      * Returns doc w/ relevant info
      */
@@ -644,12 +432,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         /// this should use SELECTED pushpin for lat/long  if there is a selection, otherwise CENTER
         const anchor = Docs.Create.MapanchorDocument({
             title: 'MapAnchor:' + this.rootDoc.title,
+            text: StrCast(this.selectedPin?.map) || StrCast(this.rootDoc.map) || 'map location',
             config_latitude: NumCast(this.selectedPin?.latitude ?? this.dataDoc.latitude),
             config_longitude: NumCast(this.selectedPin?.longitude ?? this.dataDoc.longitude),
-            config_mapZoom: NumCast(this.dataDoc.mapZoom),
-            config_mapType: StrCast(this.dataDoc.mapType),
-            // preslocationToLookAt:this.dataDoc.locationToLookAt,
-            // presType:
+            config_map_zoom: NumCast(this.dataDoc.map_zoom),
+            config_map_type: StrCast(this.dataDoc.map_type),
+            config_map: StrCast(this.selectedPin?.map) || StrCast(this.dataDoc.map),
             layout_unrendered: true,
         });
         if (anchor) {
@@ -684,23 +472,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.map_docToPinMap.set(pin, pushPin);
     };
 
-    @observable
-    pinIsSelected_TEMPORARY: boolean = false; // toggles if remove pin button appears
-
     /*
      *   Input: pin doc
      *   Removes pin from annotations
      */
     @action
-    removePushpin = (pinDoc: Doc) => {
-        // this.allMapPushpins
-        // this.allMapPushpins.map(pin => this.addPushpin(pin));
-        // this._bingMap.current.entities.clear();
+    removePushpin = (pinDoc: Doc) => this.removeDocument(pinDoc, this.annotationKey);
 
-        this.removeDocument(pinDoc, this.annotationKey);
-
-        // this.dataDoc[this.annotationKey]
-    };
     /*
      * Removes pushpin from map render
      */
@@ -725,11 +503,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     tryHideMapAnchorMenu = (e: PointerEvent) => {
         let target = document.elementFromPoint(e.x, e.y);
-
-        while (target != null) {
-            if (target === MapAnchorMenu.top.current) {
-                return;
-            }
+        while (target) {
+            if (target === MapAnchorMenu.top.current) return;
             target = target.parentElement;
         }
         e.stopPropagation();
@@ -738,13 +513,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
     };
 
-    // tryhidemenu = e => if( e.parent... == mapanchormenu.top.currrent) do nothing; else hide menu
-
     @action
     centerOnSelectedPin = () => {
         if (this.selectedPin) {
             this.dataDoc.latitude = this.selectedPin.latitude;
             this.dataDoc.longitude = this.selectedPin.longitude;
+            this.dataDoc.map = this.selectedPin.map ?? '';
+            this.bingSearchBarContents = this.selectedPin.map;
         }
         MapAnchorMenu.Instance.fadeOut(true);
         document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu);
@@ -777,33 +552,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         },
     };
 
-    /**
-     * Toggles mode for placing a pin down on map
-     */
-    @observable
-    placePinOn = false;
-    @action
-    togglePlacePin = () => {
-        if (this.placePinOn) this.placePinOn = false;
-        else this.placePinOn = true;
-    };
-
     @action
-    searchbarOnEdit = (newText: string) => {
-        this.bingSearchBarContents = newText;
-    };
+    searchbarOnEdit = (newText: string) => (this.bingSearchBarContents = newText);
 
     recolorPin = (pin: Doc, color?: string) => {
         this._bingMap.current.entities.remove(this.map_docToPinMap.get(pin));
         this.map_docToPinMap.delete(pin);
-        const newpin = new this.MicrosoftMaps.Pushpin(
-            new this.MicrosoftMaps.Location(pin.latitude, pin.longitude),
-            color
-                ? {
-                      color,
-                  }
-                : {}
-        );
+        const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.latitude, pin.longitude), color ? { color } : {});
         this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(pin));
         this._bingMap.current.entities.push(newpin);
         this.map_docToPinMap.set(pin, newpin);
@@ -822,29 +577,36 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             alert('NO Map!?');
         }
         this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick);
-        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'viewchangeend', undoable(this.updateLayout, 'Map Layout Change'));
+        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'viewchangeend', undoable(this.mapRecentered, 'Map Layout Change'));
         this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'maptypechanged', undoable(this.updateMapType, 'Map ViewType Change'));
-        this.updateLayout();
-        this._disposer.highlight = reaction(
+
+        this._disposers.mapLocation = reaction(
+            () => this.rootDoc.map,
+            mapLoc => (this.bingSearchBarContents = mapLoc),
+            { fireImmediately: true }
+        );
+        this._disposers.highlight = reaction(
             () => this.allMapPushpins.map(doc => doc[Highlight]),
-            () =>
-                this.allMapPushpins
-                    .map(doc => ({ doc, pushpin: DocCast(doc.mapPin) }))
-                    .filter(pair => pair.pushpin)
-                    .forEach(({ doc, pushpin }) => {
-                        if (doc[Highlight] && !this.map_pinHighlighted.get(pushpin)) {
-                            this.recolorPin(pushpin, 'orange');
-                            this.map_pinHighlighted.set(pushpin, true);
-                        } else if (!pushpin[Highlight] && this.map_pinHighlighted.get(pushpin)) {
-                            this.recolorPin(pushpin);
-                            this.map_pinHighlighted.delete(pushpin);
-                        }
-                    }),
+            () => {
+                const allPins = this.allMapPushpins.map(doc => ({ doc, pushpin: DocCast(doc.mapPin) })).filter(pair => pair.pushpin);
+                allPins.forEach(({ doc, pushpin }) => {
+                    if (!pushpin[Highlight] && this.map_pinHighlighted.get(pushpin)) {
+                        this.recolorPin(pushpin);
+                        this.map_pinHighlighted.delete(pushpin);
+                    }
+                });
+                allPins.forEach(({ doc, pushpin }) => {
+                    if (doc[Highlight] && !this.map_pinHighlighted.get(pushpin)) {
+                        this.recolorPin(pushpin, 'orange');
+                        this.map_pinHighlighted.set(pushpin, true);
+                    }
+                });
+            },
             { fireImmediately: true }
         );
-        // this.updateMapType();
-        this._disposer.location = reaction(
-            () => ({ lat: this.rootDoc.latitude, lng: this.rootDoc.longitude, zoom: this.rootDoc.mapZoom, mapType: this.rootDoc.mapType }),
+
+        this._disposers.location = reaction(
+            () => ({ lat: this.rootDoc.latitude, lng: this.rootDoc.longitude, zoom: this.rootDoc.map_zoom, mapType: this.rootDoc.map_type }),
             locationObject => {
                 // if (this._bingMap.current)
                 try {
@@ -862,43 +624,50 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         );
     };
 
-    // Keeps track of when dragging a pin onto map
-    draggingPin = false;
     dragToggle = (e: React.PointerEvent) => {
-        // console.log('DRAGGING TOGGLE');
-        document.addEventListener('drop', this.dropPin, true);
-        document.addEventListener('pointermove', this.pinMove, true);
-        e.stopPropagation();
-    };
-    pinMove = (e: PointerEvent) => {
-        // console.log('MOVING');
-        e.stopPropagation();
-    };
-    dropPin = (e: DragEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
-        document.removeEventListener('drop', this.dropPin, true);
-        document.removeEventListener('pointermove', this.pinMove, true);
-        let target = document.elementFromPoint(e.x, e.y);
+        let dragClone: HTMLDivElement | undefined;
 
-        while (target != null) {
-            if (target === this._ref.current) {
-                const cpt = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY);
-                const x = cpt[0] - (this.props.PanelWidth() - this.sidebarWidth()) / 2;
-                const y = cpt[1] - 32 /* height of search bar */ - this.props.PanelHeight() / 2;
-                const location = this._bingMap.current.tryPixelToLocation(new this.MicrosoftMaps.Point(x, y));
-                this.createPushpin(location.latitude, location.longitude);
-                break;
+        setupMoveUpEvents(
+            e,
+            e,
+            e => {
+                if (!dragClone) {
+                    dragClone = this._dragRef.current?.cloneNode(true) as HTMLDivElement;
+                    dragClone.style.position = 'absolute';
+                    dragClone.style.zIndex = '10000';
+                    DragManager.Root().appendChild(dragClone);
+                }
+                dragClone.style.transform = `translate(${e.clientX - 15}px, ${e.clientY - 15}px)`;
+                return false;
+            },
+            e => {
+                if (!dragClone) return;
+                DragManager.Root().removeChild(dragClone);
+                let target = document.elementFromPoint(e.x, e.y);
+                while (target) {
+                    if (target === this._ref.current) {
+                        const cpt = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY);
+                        const x = cpt[0] - (this.props.PanelWidth() - this.sidebarWidth()) / 2;
+                        const y = cpt[1] - 32 /* height of search bar */ - this.props.PanelHeight() / 2;
+                        const location = this._bingMap.current.tryPixelToLocation(new this.MicrosoftMaps.Point(x, y));
+                        this.createPushpin(location.latitude, location.longitude);
+                        break;
+                    }
+                    target = target.parentElement;
+                }
+            },
+            e => {
+                const createPin = () => this.createPushpin(this.rootDoc.latitude, this.rootDoc.longitude, this.rootDoc.map);
+                if (this.bingSearchBarContents) {
+                    this.bingSearch().then(createPin);
+                } else createPin();
             }
-            target = target.parentElement;
-        }
+        );
     };
 
-    searchbarKeyDown = (e: any) => {
-        if (e.key === 'Enter') {
-            this.bingSearch();
-        }
-    };
+    searchbarKeyDown = (e: any) => e.key === 'Enter' && this.bingSearch();
+
+    _dragRef = React.createRef<HTMLDivElement>();
     render() {
         const renderAnnotations = (childFilters?: () => string[]) => null;
         return (
@@ -908,26 +677,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     onWheel={e => e.stopPropagation()}
                     onPointerDown={async e => {
                         e.button === 0 && !e.ctrlKey && e.stopPropagation();
-                        // just a simple test of bing maps geocode api
-                        // const loc = await this.bingGeocode(this._bingMap, 'Philadelphia, PA');
-                        // this._bingMap.current.setView({
-                        //     mapTypeId: this.MicrosoftMaps.MapTypeId.aerial,
-                        //     center: new this.MicrosoftMaps.Location(loc.latitude, loc.longitude),
-                        //     zoom: 15,
-                        // });
                     }}
-                    style={{ width: `calc(100% - ${this.layout_sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
+                    style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
                     <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>
                     {renderAnnotations(this.opaqueFilter)}
                     {SnappingManager.GetIsDragging() ? null : renderAnnotations()}
-                    {this.annotationLayer}
 
                     <div className="mapBox-searchbar">
                         <EditableText
                             // editing
                             setVal={(newText: string | number) => typeof newText === 'string' && this.searchbarOnEdit(newText)}
                             onEnter={e => this.bingSearch()}
-                            placeholder={this.bingSearchBarContents}
+                            placeholder={this.bingSearchBarContents || 'enter city/zip/...'}
                             textAlign="center"
                         />
                         <IconButton
@@ -939,41 +700,34 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                                 </svg>
                             }
                             onClick={this.bingSearch}
-                            onDoubleClick={function noRefCheck() {}}
-                            onPointerDown={function noRefCheck() {}}
-                            onPointerDownCapture={function noRefCheck() {}}
-                            onPointerMove={function noRefCheck() {}}
-                            onPointerMoveCapture={function noRefCheck() {}}
-                            onPointerUp={function noRefCheck() {}}
                             type={Type.TERT}
                         />
-                        <div draggable={true} style={{ width: 30, height: 30 }} onPointerDown={this.dragToggle}>
+                        <div style={{ width: 30, height: 30 }} ref={this._dragRef} onPointerDown={this.dragToggle}>
                             <Button tooltip="drag to place a pushpin" icon={<FontAwesomeIcon size={'lg'} icon={'bullseye'} />} />
                         </div>
                     </div>
 
                     <BingMapsReact
-                        onMapReady={this.bingMapReady}
+                        onMapReady={this.bingMapReady} //
                         bingMapsKey={bingApiKey}
                         height="100%"
                         mapOptions={this.bingMapOptions}
                         width="100%"
                         viewOptions={this.bingViewOptions}
-                        onPointerUp
-                        {...() => (this.draggingPin = false)}></BingMapsReact>
+                    />
                     <div>
                         {!this._mapReady
                             ? null
                             : this.allMapPushpins.map(pushpin => (
                                   <DocumentView
                                       {...this.props}
+                                      renderDepth={this.props.renderDepth + 1}
                                       Document={pushpin}
                                       DataDoc={undefined}
                                       PanelWidth={returnOne}
                                       PanelHeight={returnOne}
                                       NativeWidth={returnOne}
                                       NativeHeight={returnOne}
-                                      onClick={() => new ScriptField(undefined)}
                                       onKey={undefined}
                                       onDoubleClick={undefined}
                                       onBrowseClick={undefined}
@@ -983,7 +737,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                                       isDocumentActive={returnFalse}
                                       isContentActive={returnFalse}
                                       addDocTab={returnFalse}
-                                      ScreenToLocalTransform={() => new Transform(0, 0, 0)}
+                                      ScreenToLocalTransform={Transform.Identity}
                                       fitContentsToBox={undefined}
                                       focus={returnOne}
                                   />
@@ -1019,7 +773,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     )}
                 </div>
                 {/* </LoadScript > */}
-                <div className="mapBox-sidebar" style={{ width: `${this.layout_sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
+                <div className="mapBox-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
                     <SidebarAnnos
                         ref={this._sidebarRef}
                         {...this.props}
diff --git a/src/client/views/nodes/MapBox/MapBox2.tsx b/src/client/views/nodes/MapBox/MapBox2.tsx
index f42dec12c..a54bdcd5e 100644
--- a/src/client/views/nodes/MapBox/MapBox2.tsx
+++ b/src/client/views/nodes/MapBox/MapBox2.tsx
@@ -260,7 +260,7 @@ export class MapBox2 extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         // } else {
         //     alert("Your geolocation is not supported by browser.")
         // };
-        map.setZoom(NumCast(this.dataDoc.mapZoom, 2.5));
+        map.setZoom(NumCast(this.dataDoc.map_zoom, 2.5));
         map.setCenter(new google.maps.LatLng(NumCast(this.dataDoc.mapLat), NumCast(this.dataDoc.mapLng)));
         setTimeout(() => {
             if (this._loadPending && this._map.getBounds()) {
@@ -292,7 +292,7 @@ export class MapBox2 extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             this._loadPending = false;
             this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map);
         }
-        this.dataDoc.mapZoom = this._map.getZoom();
+        this.dataDoc.map_zoom = this._map.getZoom();
     };
 
     /**
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index afd9bccab..6ff22e929 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -471,12 +471,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 Doc.SetInPlace(bestTarget, 'longitude', NumCast(activeItem.config_longitude), true);
                 changed = true;
             }
-            if (bestTarget.zoom !== activeItem.config_mapZoom) {
-                Doc.SetInPlace(bestTarget, 'mapZoom', NumCast(activeItem.config_mapZoom), true);
+            if (bestTarget.zoom !== activeItem.config_map_zoom) {
+                Doc.SetInPlace(bestTarget, 'map_zoom', NumCast(activeItem.config_map_zoom), true);
                 changed = true;
             }
-            if (bestTarget.mapType !== activeItem.config_mapType) {
-                Doc.SetInPlace(bestTarget, 'mapType', StrCast(activeItem.config_mapType), true);
+            if (bestTarget.map_type !== activeItem.config_map_type) {
+                Doc.SetInPlace(bestTarget, 'map_type', StrCast(activeItem.config_map_type), true);
+                changed = true;
+            }
+            if (bestTarget.map !== activeItem.config_map) {
+                Doc.SetInPlace(bestTarget, 'map', StrCast(activeItem.config_map), true);
                 changed = true;
             }
         }
@@ -663,8 +667,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             if (pinProps.pinData.map) {
                 // pinDoc.config_latitude = targetDoc?.latitude;
                 // pinDoc.config_longitude = targetDoc?.longitude;
-                pinDoc.config_mapZoom = targetDoc?.mapZoom;
-                pinDoc.config_mapType = targetDoc?.mapType;
+                pinDoc.config_map_zoom = targetDoc?.map_zoom;
+                pinDoc.config_map_type = targetDoc?.map_type;
                 //...
             }
             if (pinProps.pinData.poslayoutview)
-- 
cgit v1.2.3-70-g09d2

