tried to simplify the mapbox ui.

3 files changed, 117 insertions, 51 deletions

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 378c67253..f9dab9f82 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -206,6 +206,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const layoutField = this.selectedDoc?.[Doc.LayoutFieldKey(this.selectedDoc)];
         const isText = layoutField instanceof RichTextField;
         const isInk = layoutField instanceof InkField;
+        const isMap = this.selectedDoc?.type === DocumentType.MAP;
         const isCollection = this.selectedDoc?.type === DocumentType.COL;
         const isStacking = this.selectedDoc?._viewType === CollectionViewType.Stacking;
         const isFreeForm = this.selectedDoc?._viewType === CollectionViewType.Freeform;
@@ -221,7 +222,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 {toggle(this.dictationButton, { display: isNovice ? "none" : "" })}
                 {toggle(this.onClickButton)}
                 {toggle(this.fitWidthButton)}
-                {toggle(this.fitContentButton, { display: !isFreeForm ? "none" : "" })}
+                {toggle(this.fitContentButton, { display: !isFreeForm && !isMap ? "none" : "" })}
                 {toggle(this.autoHeightButton, { display: !isText && !isStacking && !isTree ? "none" : "" })}
                 {toggle(this.maskButton, { display: !isInk ? "none" : "" })}
                 {toggle(this.chromeButton, { display: !isCollection || isNovice ? "none" : "" })}
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index 1714fcaa9..854da5ed2 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -4,9 +4,6 @@
         height: 100%;
         overflow: hidden;
         display: flex;
-        > div {
-            position: unset !important; // when the sidebar filter flys out, this prevents the map from extending outside the document box
-        }
 
         .mapBox-infoWindow {
             background-color: white;
@@ -56,7 +53,6 @@
         }
 
         .mapBox-sidebar-handle {
-            position: absolute !important;
             top: 0;
             //top: calc(50% - 17.5px);  // use this to center vertically -- make sure it looks okay for slide views
             width: 10px;
@@ -66,4 +62,26 @@
             border-radius: 20px;
             cursor:grabbing;
         }
+        .mapBox-addMarker {
+            left: 50%;
+            margin-left: 120px;
+            right: unset !important;
+            margin-top: -10;
+            height: max-content;
+        }
+        .searchbox {
+            display:none;
+        }
+        .mapBox-addMarker {
+            display:none;
+        }
+}
+
+.mapBox:hover {
+    .mapBox-addMarker {
+        display:block;
+    }
+    .searchbox {
+        display :block;
+    }
 }
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 8b23405d8..fc656cd37 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -110,10 +110,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @observable private markerMap: { [id: string]: google.maps.Marker } = {};
     // @observable private markerIdToMapMarker: { [id: string]: Doc | MapMarker | undefined } = {};
     @observable private center = navigator.geolocation ? navigator.geolocation.getCurrentPosition : defaultCenter;
-    @observable private zoom = 2.5;
     @observable private _marqueeing: number[] | undefined;
     @observable private _isAnnotating = false;
-    @observable private bounds = new window.google.maps.LatLngBounds();
     @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);
@@ -143,10 +141,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     // iterate allMarkers to size, center, and zoom map to contain all markers
     private fitBounds = (map: google.maps.Map) => {
-        this.allMapMarkers.map(place => {
-            this.bounds.extend({ lat: NumCast(place.lat), lng: NumCast(place.lng) });
-        });
-        map.fitBounds(this.bounds)
+        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()));
     }
 
     /**
@@ -154,31 +154,51 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * @param controlDiv 
      * @param map 
      */
-    private CenterControl = (controlDiv: Element) => {
+    private CenterControl = () => {
+        const controlDiv = document.createElement("div");
+        controlDiv.className = "mapBox-addMarker"
         // Set CSS for the control border.
         const controlUI = document.createElement("div");
-
         controlUI.style.backgroundColor = "#fff";
-        controlUI.style.border = "2px solid #fff";
         controlUI.style.borderRadius = "3px";
         controlUI.style.cursor = "pointer";
-        controlUI.style.marginTop = "8px";
+        controlUI.style.marginTop = "10px";
+        controlUI.style.borderRadius = "4px";
         controlUI.style.marginBottom = "22px";
         controlUI.style.textAlign = "center";
-        controlUI.title = "Click to add marker to the location your pointer is at";
-        controlDiv.appendChild(controlUI);
+        controlUI.style.position = "absolute";
+        controlUI.style.width = "32px";
+        controlUI.style.height = "32px";
+        controlUI.title = "Click to toggle marker mode.  In marker mode, click on map to place a marker.";
+
+        const plIcon = document.createElement("img");
+        plIcon.src = "https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-256.png";
+        plIcon.style.color = "rgb(25,25,25)";
+        plIcon.style.fontFamily = "Roboto,Arial,sans-serif";
+        plIcon.style.fontSize = "16px";
+        plIcon.style.lineHeight = "32px";
+        plIcon.style.left = "18";
+        plIcon.style.top = "15";
+        plIcon.style.position = "absolute";
+        plIcon.width = 14;
+        plIcon.height = 14;
+        plIcon.innerHTML = "Add";
+        controlUI.appendChild(plIcon);
 
         // Set CSS for the control interior.
-        const controlText = document.createElement("div");
-
-        controlText.style.color = "rgb(25,25,25)";
-        controlText.style.fontFamily = "Roboto,Arial,sans-serif";
-        controlText.style.fontSize = "16px";
-        controlText.style.lineHeight = "38px";
-        controlText.style.paddingLeft = "5px";
-        controlText.style.paddingRight = "5px";
-        controlText.innerHTML = "Add Marker";
-        controlUI.appendChild(controlText);
+        const markerIcon = document.createElement("img");
+        markerIcon.src = "https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-1024.png";
+        markerIcon.style.color = "rgb(25,25,25)";
+        markerIcon.style.fontFamily = "Roboto,Arial,sans-serif";
+        markerIcon.style.fontSize = "16px";
+        markerIcon.style.lineHeight = "32px";
+        markerIcon.style.left = "-2";
+        markerIcon.style.top = "1";
+        markerIcon.width = 30;
+        markerIcon.height = 30;
+        markerIcon.style.position = "absolute";
+        markerIcon.innerHTML = "Add";
+        controlUI.appendChild(markerIcon);
 
         // Setup the click event listeners
         controlUI.addEventListener("click", () => {
@@ -186,14 +206,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 this.toggleAddMarker = false;
                 console.log("add marker button status:" + this.toggleAddMarker);
                 controlUI.style.backgroundColor = "#fff";
-                controlText.style.color = "rgb(25,25,25)";
+                markerIcon.style.color = "rgb(25,25,25)";
             } else {
                 this.toggleAddMarker = true;
                 console.log("add marker button status:" + this.toggleAddMarker);
                 controlUI.style.backgroundColor = "#4476f7";
-                controlText.style.color = "rgb(255,255,255)";
+                markerIcon.style.color = "rgb(255,255,255)";
             };
         });
+        controlDiv.appendChild(controlUI);
+        return controlDiv;
     }
 
     /**
@@ -212,7 +234,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.addDocument(mapMarker, this.annotationKey);
     }
 
-
+    _loadPending = true;
     /**
      * store a reference to google map instance
      * setup the drawing manager on the top right corner of map
@@ -222,26 +244,32 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @action
     private loadHandler = (map: google.maps.Map) => {
         this._map = map;
-        const centerControlDiv = document.createElement("div");
-        this.CenterControl(centerControlDiv);
+        this._loadPending = true;
+        const centerControlDiv = this.CenterControl();
         map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv);
         //drawingManager.setMap(map);
-        if (navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition(
-                (position: Position) => {
-                    const pos = {
-                        lat: position.coords.latitude,
-                        lng: position.coords.longitude,
-                    };
-                    this._map.setCenter(pos);
-                }
-            );
-        } else {
-            alert("Your geolocation is not supported by browser.")
-        };
-        this.fitBounds(map);
-
-
+        // if (navigator.geolocation) {
+        //     navigator.geolocation.getCurrentPosition(
+        //         (position: Position) => {
+        //             const pos = {
+        //                 lat: position.coords.latitude,
+        //                 lng: position.coords.longitude,
+        //             };
+        //             this._map.setCenter(pos);
+        //         }
+        //     );
+        // } else {
+        //     alert("Your geolocation is not supported by browser.")
+        // };
+        map.setZoom(NumCast(this.dataDoc.mapZoom, 2.5));
+        map.setCenter(new google.maps.LatLng(NumCast(this.dataDoc.mapLat), NumCast(this.dataDoc.mapLng)));
+        setTimeout(() => {
+
+            if (this._loadPending && this._map.getBounds()) {
+                this._loadPending = false;
+                this.layoutDoc.fitToBox && this.fitBounds(this._map);
+            }
+        }, 250);
         // listener to addmarker event
         this._map.addListener('click', (e: MouseEvent) => {
             if (this.toggleAddMarker == true) {
@@ -250,6 +278,25 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         })
     }
 
+    @action
+    centered = () => {
+        if (this._loadPending && this._map.getBounds()) {
+            this._loadPending = false;
+            this.layoutDoc.fitToBox && 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.fitToBox && this.fitBounds(this._map);
+        }
+        this.dataDoc.mapZoom = this._map.getZoom();
+    }
+
     /**
      * Load and render all map markers
      * @param marker 
@@ -361,7 +408,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             console.log(this._map);
             this._map.fitBounds(place.geometry.viewport);
         } else {
-            console.log(this._map);
             this._map.setCenter(place.geometry.location);
             this._map.setZoom(17);
         }
@@ -548,8 +594,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 {this.annotationLayer}
                 <GoogleMap
                     mapContainerStyle={mapContainerStyle}
-                    zoom={this.zoom}
-                    onLoad={map => this.loadHandler(map)}
+                    onZoomChanged={this.zoomChanged}
+                    onCenterChanged={this.centered}
+                    onLoad={this.loadHandler}
                     options={mapOptions}
                 >
                     <Autocomplete