cleaned up some field key stuff for mapview

1 files changed, 47 insertions, 40 deletions

diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx
index 569f8ba7a..44bb22827 100644
--- a/src/client/views/collections/CollectionMapView.tsx
+++ b/src/client/views/collections/CollectionMapView.tsx
@@ -11,10 +11,6 @@ import { CollectionSubView } from "./CollectionSubView";
 import React = require("react");
 import { DocumentManager } from "../../util/DocumentManager";
 import { UndoManager } from "../../util/UndoManager";
-import { returnTrue } from "../../../Utils";
-import { CancellationError } from "bluebird";
-import { ln } from "shelljs";
-import { dfareporting } from "googleapis/build/src/apis/dfareporting";
 
 type MapDocument = makeInterface<[typeof documentSchema]>;
 const MapDocument = makeInterface(documentSchema);
@@ -24,32 +20,33 @@ export type LocationData = google.maps.LatLngLiteral & { address?: string };
 @observer
 class CollectionMapView extends CollectionSubView<MapDocument, Partial<MapProps> & { google: any }>(MapDocument) {
 
-    getLocation = (doc: Opt<Doc>, fieldKey: string, defaultLocation?: LocationData) => {
+    getLocation = (doc: Opt<Doc>, fieldKey: string) => {
         if (doc) {
             let lat: Opt<number> = Cast(doc[fieldKey + "-lat"], "number", null);
             let lng: Opt<number> = Cast(doc[fieldKey + "-lng"], "number", null);
+            let zoom: Opt<number> = Cast(doc[fieldKey + "-zoom"], "number", null);
             const address = Cast(doc[fieldKey + "-address"], "string", null);
             if (address) {
                 // use geo service to convert to lat/lng
                 lat = lat;
                 lng = lng;
             }
-            if (lat === undefined) lat = defaultLocation?.lat;
-            if (lng === undefined) lng = defaultLocation?.lng;
-            return ({ lat, lng });
+            return lat !== undefined && lng !== undefined ? ({ lat, lng, zoom }) : undefined;
         }
-        return ({ lat: 35.1592238, lng: -98.4466577 });
+        return undefined;
     }
     renderMarker(layout: Doc, icon: Opt<google.maps.Icon>) {
-        const location = this.getLocation(layout, "location");
-        return location.lat === undefined || location.lng === undefined ? (null) :
+        const location = this.getLocation(layout, "mapLocation");
+        return !location ? (null) :
             <Marker
                 key={layout[Id]}
                 label={StrCast(layout.title)}
                 position={{ lat: location.lat, lng: location.lng }}
                 onClick={async () => {
-                    this.props.Document.mapCenterLat = location.lat;
-                    this.props.Document.mapCenterLng = location.lng;
+                    this.layoutDoc[this.props.fieldKey + "-mapCenter-lat"] = 0;
+                    this.layoutDoc[this.props.fieldKey + "-mapCenter-lat"] = location.lat;
+                    this.layoutDoc[this.props.fieldKey + "-mapCenter-lng"] = location.lng;
+                    location.zoom && (this.layoutDoc[this.props.fieldKey + "-mapCenter-zoom"] = location.zoom);
                     if (layout.isLinkButton && DocListCast(layout.links).length) {
                         const batch = UndoManager.StartBatch("follow link click");
                         await DocumentManager.Instance.FollowLink(undefined, layout, (doc: Doc, where: string, finished?: () => void) => {
@@ -67,35 +64,45 @@ class CollectionMapView extends CollectionSubView<MapDocument, Partial<MapProps>
         const { childLayoutPairs } = this;
         const { Document } = this.props;
         let center = this.getLocation(Document, this.props.fieldKey + "-mapCenter");
-        if (center.lat === undefined) {
-            center = this.getLocation(childLayoutPairs.map(pair => pair.layout).find(returnTrue), "location", { lat: 35.1592238, lng: -98.4466577 });
+        if (center === undefined) {
+            center = childLayoutPairs.map(pair => this.getLocation(pair.layout, "mapLocation")).find(layout => layout);
+            if (center === undefined) {
+                center = { lat: 35.1592238, lng: -98.444512, zoom: 15 }; // nowhere, OK
+            }
         }
         TraceMobx();
-        return center.lat === undefined || center.lng === undefined ? (null) :
-            <div className={"collectionMapView-contents"}
-                style={{ pointerEvents: this.props.active() ? undefined : "none" }}
-                onWheel={e => e.stopPropagation()}
-                onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} >
-                <Map
-                    google={this.props.google}
-                    zoom={NumCast(Document.zoom, 10)}
-                    center={{ lat: center.lat, lng: center.lng }}
-                    initialCenter={{ lat: center.lat, lng: center.lng }}
-                >
-                    {childLayoutPairs.map(({ layout }) => {
-                        let icon: Opt<google.maps.Icon>, iconUrl: Opt<string>;
-                        if ((iconUrl = StrCast(Document.mapIconUrl, null))) {
-                            const iconSize = new google.maps.Size(NumCast(layout.mapIconWidth, 45), NumCast(layout.mapIconHeight, 45));
-                            icon = {
-                                size: iconSize,
-                                scaledSize: iconSize,
-                                url: iconUrl
-                            };
-                        }
-                        return this.renderMarker(layout, icon);
-                    })}
-                </Map>
-            </div>;
+        return <div className={"collectionMapView-contents"}
+            style={{ pointerEvents: this.props.active() ? undefined : "none" }}
+            onWheel={e => e.stopPropagation()}
+            onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} >
+            <Map
+                google={this.props.google}
+                zoom={center.zoom || 10}
+                initialCenter={center}
+                center={center}
+                onBoundsChanged={e => console.log(e)}
+                onRecenter={e => console.log(e)}
+                onDragend={(centerMoved, center) => console.log(centerMoved, center)}
+                onProjectionChanged={e => console.log(e)}
+                onCenterChanged={(e => {
+                    Document[this.props.fieldKey + "-mapCenter-lat"] = typeof e?.center?.lat === "number" ? e.center.lat : center!.lat;
+                    Document[this.props.fieldKey + "-mapCenter-lng"] = typeof e?.center?.lng === "number" ? e.center.lng : center!.lng;
+                })}
+            >
+                {childLayoutPairs.map(({ layout }) => {
+                    let icon: Opt<google.maps.Icon>, iconUrl: Opt<string>;
+                    if ((iconUrl = StrCast(Document.mapIconUrl, null))) {
+                        const iconSize = new google.maps.Size(NumCast(layout["mapLocation-iconWidth"], 45), NumCast(layout["mapLocation-iconHeight"], 45));
+                        icon = {
+                            size: iconSize,
+                            scaledSize: iconSize,
+                            url: iconUrl
+                        };
+                    }
+                    return this.renderMarker(layout, icon);
+                })}
+            </Map>
+        </div>;
     }
 
 }