fixed maps to support drag/drop, and fixed to work with docs that just have an address.

3 files changed, 44 insertions, 23 deletions

diff --git a/src/client/views/collections/CollectionMapView.scss b/src/client/views/collections/CollectionMapView.scss
index 4956ad946..cb58b1750 100644
--- a/src/client/views/collections/CollectionMapView.scss
+++ b/src/client/views/collections/CollectionMapView.scss
@@ -1,6 +1,10 @@
-.collectionMapView-contents {
+.collectionMapView {
     width: 100%;
     height: 100%;
+    .collectionMapView-contents {
+        width: 100%;
+        height: 100%;
+    }
 }
 
 .loadingWrapper {
diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx
index fced52275..a80f0557f 100644
--- a/src/client/views/collections/CollectionMapView.tsx
+++ b/src/client/views/collections/CollectionMapView.tsx
@@ -40,10 +40,25 @@ class CollectionMapView extends CollectionSubView<MapSchema, Partial<MapProps> &
 
     getLocation = (doc: Opt<Doc>, fieldKey: string): Opt<LocationData> => {
         if (doc) {
-            const lat: Opt<number> = Cast(doc[fieldKey + "-lat"], "number", null);
-            const lng: Opt<number> = Cast(doc[fieldKey + "-lng"], "number", null);
-            const zoom: Opt<number> = Cast(doc[fieldKey + "-zoom"], "number", null);
-            return lat !== undefined && lng !== undefined ? ({ lat, lng, zoom }) : undefined;
+            const lat: Opt<number> = Cast(doc[fieldKey + "-lat"], "number", null) || (Cast(doc[fieldKey + "-lat"], "string", null) && Number(Cast(doc[fieldKey + "-lat"], "string", null))) || undefined;
+            const lng: Opt<number> = Cast(doc[fieldKey + "-lng"], "number", null) || (Cast(doc[fieldKey + "-lng"], "string", null) && Number(Cast(doc[fieldKey + "-lng"], "string", null))) || undefined;
+            const zoom: Opt<number> = Cast(doc[fieldKey + "-zoom"], "number", null) || (Cast(doc[fieldKey + "-zoom"], "string", null) && Number(Cast(doc[fieldKey + "-zoom"], "string", null))) || undefined;
+            const address: Opt<string> = Cast(doc[fieldKey + "-address"], "string", null);
+            if (lat !== undefined && lng !== undefined) {
+                return ({ lat, lng, zoom });
+            } else if (address) {
+                setTimeout(() => {
+                    const target = `${base}address=${address.replace(/\s+/g, "+")}&key=${process.env.GOOGLE_MAPS_GEO!}`;
+                    requestPromise.get(target).then(action((res: any) => {
+                        const { lat, lng } = JSON.parse(res).results[0].geometry.location;
+                        if (doc[fieldKey + "-lat"] !== lat || doc[fieldKey + "-lng"] !== lng) {
+                            Doc.SetInPlace(doc, fieldKey + "-lat", lat, true);
+                            Doc.SetInPlace(doc, fieldKey + "-lng", lng, true);
+                        }
+                    }));
+                });
+                return ({ lat: 35.1592238, lng: -98.444512, zoom: 15 });
+            }
         }
         return undefined;
     }
@@ -152,23 +167,25 @@ class CollectionMapView extends CollectionSubView<MapSchema, Partial<MapProps> &
             }
         }
         TraceMobx();
-        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()} >
-            <GeoMap
-                //ref={this.mapRef}
-                google={this.props.google}
-                zoom={center.zoom || 10}
-                initialCenter={center}
-                center={center}
-                onDragend={undoBatch(action((e: any, map: any) => {
-                    Document[this.props.fieldKey + "-mapCenter-lat"] = map.center.lat();
-                    Document[this.props.fieldKey + "-mapCenter-lng"] = map.center.lng();
-                }))}
-            >
-                {this.contents}
-            </GeoMap>
+        return <div className="collectionMapView" ref={this.createDashEventsTarget}>
+            <div className={"collectionMapView-contents"}
+                style={{ pointerEvents: this.props.active() ? undefined : "none" }}
+                onWheel={e => e.stopPropagation()}
+                onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} >
+                <GeoMap
+                    //ref={this.mapRef}
+                    google={this.props.google}
+                    zoom={center.zoom || 10}
+                    initialCenter={center}
+                    center={center}
+                    onDragend={undoBatch(action((e: any, map: any) => {
+                        Document[this.props.fieldKey + "-mapCenter-lat"] = map.center.lat();
+                        Document[this.props.fieldKey + "-mapCenter-lng"] = map.center.lng();
+                    }))}
+                >
+                    {this.contents}
+                </GeoMap>
+            </div>
         </div>;
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 9dd3d640b..454c3a5f2 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -309,7 +309,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
         this.hideMarquee();
     }
 
-    getCollection = (selected: Doc[], asTemplate: boolean, isBackground: boolean = false) => {
+    getCollection = (selected: Doc[], asTemplate: boolean, isBackground?: boolean) => {
         const bounds = this.Bounds;
         // const inkData = this.ink ? this.ink.inkData : undefined;
         const creator = asTemplate ? Docs.Create.StackingDocument : Docs.Create.FreeformDocument;