restored keeping properties pane open when selection changes. added Doc paraemter to fitWidth() prop function. split MapBoxInfoWindow out of MapBox and added an Add Note button.

7 files changed, 162 insertions, 148 deletions

diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 6674f684d..b71086561 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -44,11 +44,8 @@ export namespace SelectionManager {
         }
         @action
         DeselectAll(): void {
-            if (CurrentUserUtils.propertiesWidth > 0) {
-                CurrentUserUtils.propertiesWidth = 0;
-            }
             manager.SelectedSchemaDocument = undefined;
-            Array.from(manager.SelectedViews.keys()).map(dv => dv.props.whenChildContentsActiveChanged(false));
+            Array.from(manager.SelectedViews.keys()).forEach(dv => dv.props.whenChildContentsActiveChanged(false));
             manager.SelectedViews.clear();
         }
     }
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index bffaf86b1..eddb97878 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -231,8 +231,8 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             LayoutTemplate={this.props.childLayoutTemplate}
             LayoutTemplateString={this.props.childLayoutString}
             freezeDimensions={this.props.childFreezeDimensions}
-            NativeWidth={this.props.childIgnoreNativeSize ? returnZero : this.props.childFitWidth?.() || doc._fitWidth && !Doc.NativeWidth(doc) ? width : undefined}  // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox
-            NativeHeight={this.props.childIgnoreNativeSize ? returnZero : this.props.childFitWidth?.() || doc._fitWidth && !Doc.NativeHeight(doc) ? height : undefined}
+            NativeWidth={this.props.childIgnoreNativeSize ? returnZero : this.props.childFitWidth?.(doc) || doc._fitWidth && !Doc.NativeWidth(doc) ? width : undefined}  // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox
+            NativeHeight={this.props.childIgnoreNativeSize ? returnZero : this.props.childFitWidth?.(doc) || doc._fitWidth && !Doc.NativeHeight(doc) ? height : undefined}
             dontCenter={this.props.childIgnoreNativeSize ? "xy" : undefined}
             dontRegisterView={dataDoc ? true : BoolCast(this.layoutDoc.childDontRegisterViews, this.props.dontRegisterView)}
             rootSelected={this.rootSelected}
@@ -271,7 +271,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         if (!d) return 0;
         const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
         const maxWidth = this.columnWidth / this.numGroupColumns;
-        if (!this.layoutDoc._columnsFill && !(childLayoutDoc._fitWidth || this.props.childFitWidth?.())) {
+        if (!this.layoutDoc._columnsFill && !(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d))) {
             return Math.min(d[WidthSym](), maxWidth);
         }
         return maxWidth;
@@ -281,8 +281,8 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
         const childDataDoc = (!d.isTemplateDoc && !d.isTemplateForField && !d.PARAMS) ? undefined : this.props.DataDoc;
         const maxHeight = (lim => lim === 0 ? this.props.PanelWidth() : lim === -1 ? 10000 : lim)(NumCast(this.layoutDoc.childLimitHeight, -1));
-        const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.()) ? d[WidthSym]() : 0);
-        const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.()) ? d[HeightSym]() : 0);
+        const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[WidthSym]() : 0);
+        const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[HeightSym]() : 0);
         if (nw && nh) {
             const colWid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1);
             const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d), colWid);
@@ -291,7 +291,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
                 docWid * nh / nw);
         }
         const childHeight = NumCast(childLayoutDoc._height);
-        const panelHeight = (childLayoutDoc._fitWidth || this.props.childFitWidth?.()) ? Number.MAX_SAFE_INTEGER : this.props.PanelHeight() - 2 * this.yMargin;
+        const panelHeight = (childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? Number.MAX_SAFE_INTEGER : this.props.PanelHeight() - 2 * this.yMargin;
         return Math.min(childHeight, maxHeight, panelHeight);
     }
 
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 510ec6ba9..f66bac20e 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -70,7 +70,7 @@ export interface CollectionViewProps extends FieldViewProps {
     children?: never | (() => JSX.Element[]) | React.ReactNode;
     childDocuments?: Doc[]; // used to override the documents shown by the sub collection to an explicit list (see LinkBox)
     childDocumentsActive?: () => boolean;// whether child documents can be dragged if collection can be dragged (eg., in a when a Pile document is in startburst mode)
-    childFitWidth?: () => boolean;
+    childFitWidth?: (child: Doc) => boolean;
     childShowTitle?: () => string;
     childOpacity?: () => number;
     childContextMenuItems?: () => { script: ScriptField, label: string }[];
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 138bad9b8..9fc4b7890 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -118,7 +118,7 @@ export interface DocumentViewSharedProps {
     layerProvider: undefined | ((doc: Doc, assign?: boolean) => boolean);
     styleProvider: Opt<StyleProviderFunc>;
     focus: DocFocusFunc;
-    fitWidth?: () => boolean;
+    fitWidth?: (doc: Doc) => boolean;
     docFilters: () => string[];
     docRangeFilters: () => string[];
     searchFilterDocs: () => Doc[];
@@ -1140,7 +1140,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     get ComponentView() { return this.docView?._componentView; }
     get allLinks() { return this.docView?.allLinks || []; }
     get LayoutFieldKey() { return this.docView?.LayoutFieldKey || "layout"; }
-    get fitWidth() { return this.props.fitWidth?.() || this.layoutDoc.fitWidth; }
+    get fitWidth() { return this.props.fitWidth?.(this.rootDoc) || this.layoutDoc.fitWidth; }
 
     @computed get docViewPath() { return this.props.docViewPath ? [...this.props.docViewPath(), this] : [this]; }
     @computed get layoutDoc() { return Doc.Layout(this.Document, this.props.LayoutTemplate?.()); }
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index f275bed54..1714fcaa9 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -8,6 +8,13 @@
             position: unset !important; // when the sidebar filter flys out, this prevents the map from extending outside the document box
         }
 
+        .mapBox-infoWindow {
+            background-color: white;
+            opacity: 0.75;
+            padding: 12; 
+            font-size: 17;
+        }
+
         .mapBox-overlayButton-sidebar {
             background: #121721;
             height: 25px;
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 7875060e2..8b23405d8 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1,5 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Autocomplete, GoogleMap, GoogleMapProps, InfoWindow, LoadScript, Marker } from '@react-google-maps/api';
+import { Autocomplete, GoogleMap, GoogleMapProps, Marker } from '@react-google-maps/api';
+import * as dotenv from 'dotenv';
 import { action, computed, IReactionDisposer, observable, ObservableMap } from 'mobx';
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -10,16 +11,12 @@ import { InkTool } from '../../../../fields/InkField';
 import { makeInterface } from '../../../../fields/Schema';
 import { NumCast, StrCast } from '../../../../fields/Types';
 import { TraceMobx } from '../../../../fields/util';
-import { emptyFunction, OmitKeys, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { emptyFunction, OmitKeys, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils';
 import { Docs } from '../../../documents/Documents';
 import { CurrentUserUtils } from '../../../util/CurrentUserUtils';
 import { DragManager } from '../../../util/DragManager';
-import { SelectionManager } from '../../../util/SelectionManager';
 import { SnappingManager } from '../../../util/SnappingManager';
-import { undoBatch } from '../../../util/UndoManager';
 import { CollectionFreeFormView, MarqueeOptionsMenu } from '../../collections/collectionFreeForm';
-import { CollectionStackingView } from '../../collections/CollectionStackingView';
-import { CollectionViewType } from '../../collections/CollectionView';
 import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent';
 import { Colors } from '../../global/globalEnums';
 import { MarqueeAnnotator } from '../../MarqueeAnnotator';
@@ -28,8 +25,8 @@ import { Annotation } from '../../pdf/Annotation';
 import { SidebarAnnos } from '../../SidebarAnnos';
 import { StyleProp } from '../../StyleProvider';
 import { FieldView, FieldViewProps } from '../FieldView';
-import * as dotenv from 'dotenv';
 import "./MapBox.scss";
+import { MapBoxInfoWindow } from './MapBoxInfoWindow';
 
 /**
  * MapBox architecture:
@@ -146,7 +143,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     // iterate allMarkers to size, center, and zoom map to contain all markers
     private fitBounds = (map: google.maps.Map) => {
-        console.log('map bound is:' + this.bounds);
         this.allMapMarkers.map(place => {
             this.bounds.extend({ lat: NumCast(place.lat), lng: NumCast(place.lng) });
         });
@@ -232,7 +228,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         //drawingManager.setMap(map);
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(
-                (position: GeolocationPosition) => {
+                (position: Position) => {
                     const pos = {
                         lat: position.coords.latitude,
                         lng: position.coords.longitude,
@@ -243,17 +239,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         } else {
             alert("Your geolocation is not supported by browser.")
         };
-        console.log("all sidebar docs during map loading is:")
-        console.log(this.allSidebarDocs);
         this.fitBounds(map);
 
 
         // listener to addmarker event
-        this._map.addListener('click', (e) => {
-            console.log("add marker map status:" + this.toggleAddMarker);
+        this._map.addListener('click', (e: MouseEvent) => {
             if (this.toggleAddMarker == true) {
-                this.placeMarker(e.latLng, map)
-                console.log(this.allMapMarkers)
+                this.placeMarker((e as any).latLng, map);
             }
         })
     }
@@ -266,9 +258,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @action
     private markerLoadHandler = (marker: google.maps.Marker, place: Doc) => {
         place[Id] ? this.markerMap[place[Id]] = marker : null;
-
-        console.log("the following is a markerMap from id to Marker:")
-        console.log(this.markerMap);
     }
 
     /**
@@ -277,15 +266,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * @param place 
      */
     @action
-    private markerClickHandler = (e: MouseEvent, place: Doc) => {
+    private markerClickHandler = (e: google.maps.MapMouseEvent, place: Doc) => {
         // set which place was clicked
         this.selectedPlace = place;
-
-        console.log("you have selected this location:");
-        console.log(this.selectedPlace);
-
         place.infoWindowOpen = true;
-        console.log("open infowindow")
     }
 
     /**
@@ -406,15 +390,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         )
     }
 
-
-    @action
-    private handleInfoWindowClose = (place: Doc) => {
-        if (place.infoWindowOpen) {
-            place.infoWindowOpen = false;
-        }
-        place.infoWindowOpen = false;
-    }
-
     /**
      * Handles toggle of sidebar on click the little comment button
      */
@@ -476,19 +451,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return this.addDocument(doc, annotationKey);
     }
 
-    pointerEvents = () => this.props.isContentActive() && this.props.pointerEvents !== "none" && !MarqueeOptionsMenu.Instance.isShown() ? "all" : SnappingManager.GetIsDragging() ? undefined : "none";
-
     @computed get annotationLayer() {
-        TraceMobx();
-        const pe = this.pointerEvents();
+        const pe = this.props.isContentActive() && this.props.pointerEvents !== "none" && !MarqueeOptionsMenu.Instance.isShown() ? "all" :
+            SnappingManager.GetIsDragging() ? undefined : "none"
         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 {...this.props} fieldKey={this.annotationKey} pointerEvents={pe} showInfo={this.showInfo} dataDoc={this.dataDoc} anno={anno} key={`${anno[Id]}-annotation`} />)}
+                <Annotation key={`${anno[Id]}-annotation`} {...this.props}
+                    fieldKey={this.annotationKey} pointerEvents={pe} showInfo={this.showInfo} dataDoc={this.dataDoc} anno={anno} />)}
         </div>;
-
     }
 
-
     getAnchor = () => {
         const anchor =
             AnchorMenu.Instance?.GetAnchor(this._savedAnnotations) ??
@@ -496,43 +468,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return anchor;
     }
 
-    infoWidth = () => this.props.PanelWidth() / 5;
-    infoHeight = () => this.props.PanelWidth() / 5;
-
-    // Collection stacking view for documents in the infowindow of a map marker
-    private renderChildDocs = (selectedDoc: Doc) => {
-        return <div style={{ width: this.infoWidth(), height: this.infoHeight() }}>
-            <CollectionStackingView {
-                ...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
-                Document={selectedDoc}
-                DataDoc={undefined}
-                NativeWidth={returnZero}
-                NativeHeight={returnZero}
-                PanelHeight={this.infoHeight}
-                PanelWidth={this.infoWidth}
-                docFilters={returnEmptyFilter}
-                setHeight={emptyFunction}
-                isAnnotationOverlay={false}
-                select={emptyFunction}
-                scaling={returnOne}
-                isContentActive={returnTrue}
-                chromeHidden={true}
-                rootSelected={returnFalse}
-                whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
-                childHideDecorationTitle={returnTrue}
-                // childDocumentsActive={returnFalse}
-                removeDocument={this.removeDocument}
-                moveDocument={this.moveDocument}
-                addDocument={this.addDocument}
-                CollectionView={undefined}
-                ScreenToLocalTransform={this.props.ScreenToLocalTransform}
-                renderDepth={this.props.renderDepth + 1}
-                viewType={CollectionViewType.Stacking}
-                fieldKey={"data"}
-                pointerEvents={"all"}
-            /></div>;
-    }
-
     /**
      * render contents in allMapMarkers (e.g. images with exifData) into google maps as map marker
      * @returns 
@@ -543,41 +478,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 key={place[Id]}
                 position={{ lat: NumCast(place.lat), lng: NumCast(place.lng) }}
                 onLoad={marker => this.markerLoadHandler(marker, place)}
-                onClick={e => this.markerClickHandler(e, place)}
+                onClick={(e: google.maps.MapMouseEvent) => this.markerClickHandler(e, place)}
             />
         ))
     }
 
-    /**
-     * Renders infowindow corresponding to a map marker document
-     * @param place 
-     * @returns 
-     */
-    private renderInfoWindow = (place: Doc) => {
-
-        return place.infoWindowOpen && (
-            <InfoWindow
-                key={place[Id]}
-                anchor={this.markerMap[place[Id]]}
-                onCloseClick={() => this.handleInfoWindowClose(place)}
-            >
-                <div className="mapbox-infowindow" style={{ backgroundColor: 'white', opacity: 0.75, padding: 12, fontSize: 17 }}>
-                    {this.renderChildDocs(place)}
-                    <hr />
-                    <div>
-                        <button>New link+</button>
-                    </div>
-                </div>
-            </InfoWindow>
-        )
-    }
-
     // TODO: auto center on select a document in the sidebar
     private handleMapCenter = (map: google.maps.Map) => {
-        console.log("print the selected views in selectionManager:")
-        if (SelectionManager.Views().lastElement()) {
-            console.log(SelectionManager.Views().lastElement());
-        }
+        // console.log("print the selected views in selectionManager:")
+        // if (SelectionManager.Views().lastElement()) {
+        //     console.log(SelectionManager.Views().lastElement());
+        // }
     }
 
     panelWidth = () => this.props.PanelWidth() / (this.props.scaling?.() || 1) - this.sidebarWidth(); // (this.Document.scrollHeight || Doc.NativeHeight(this.Document) || 0);
@@ -585,35 +496,41 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._scrollTop));
     transparentFilter = () => [...this.props.docFilters(), Utils.IsTransparentFilter()];
     opaqueFilter = () => [...this.props.docFilters(), Utils.IsOpaqueFilter()];
-
+    infoWidth = () => this.props.PanelWidth() / 5;
+    infoHeight = () => this.props.PanelHeight() / 5;
     anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick;
 
     render() {
-        const renderAnnotations = (docFilters?: () => string[]) =>
-            <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
-                renderDepth={this.props.renderDepth + 1}
-                isAnnotationOverlay={true}
-                fieldKey={this.annotationKey}
-                CollectionView={undefined}
-                setPreviewCursor={this.setPreviewCursor}
-                PanelWidth={this.panelWidth}
-                PanelHeight={this.panelHeight}
-                ScreenToLocalTransform={this.scrollXf}
-                scaling={returnOne}
-                dropAction={"alias"}
-                docFilters={docFilters || this.props.docFilters}
-                dontRenderDocuments={docFilters ? false : true}
-                select={emptyFunction}
-                ContentScaling={returnOne}
-                bringToFront={emptyFunction}
-                whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
-                removeDocument={this.removeDocument}
-                moveDocument={this.moveDocument}
-                addDocument={this.sidebarAddDocument}
-                childPointerEvents={true}
-                pointerEvents={CurrentUserUtils.SelectedTool !== InkTool.None || this._isAnnotating || SnappingManager.GetIsDragging() ? "all" : "none"} />;
+        const renderAnnotations = (docFilters?: () => string[]) => (null);
+        // bcz: commmented this out.  Otherwise, any documents that are rendered with an InfoWindow of a marker
+        //      will also be rendered as freeform annotations on the map. However, it doesn't seem that rendering
+        //      freeform documents on the map does anything anyway, so getting rid of it for now.  Also, since documents
+        //      are rendered twice, adding a new note to the InfoWindow loses focus immediately on creation since it gets
+        //      shifted to the non-visible view of the document in this freeform view.
+        // <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
+        //     renderDepth={this.props.renderDepth + 1}
+        //     isAnnotationOverlay={true}
+        //     fieldKey={this.annotationKey}
+        //     CollectionView={undefined}
+        //     setPreviewCursor={this.setPreviewCursor}
+        //     PanelWidth={this.panelWidth}
+        //     PanelHeight={this.panelHeight}
+        //     ScreenToLocalTransform={this.scrollXf}
+        //     scaling={returnOne}
+        //     dropAction={"alias"}
+        //     docFilters={docFilters || this.props.docFilters}
+        //     dontRenderDocuments={docFilters ? false : true}
+        //     select={emptyFunction}
+        //     ContentScaling={returnOne}
+        //     bringToFront={emptyFunction}
+        //     whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+        //     removeDocument={this.removeDocument}
+        //     moveDocument={this.moveDocument}
+        //     addDocument={this.sidebarAddDocument}
+        //     childPointerEvents={true}
+        //     pointerEvents={CurrentUserUtils.SelectedTool !== InkTool.None || this._isAnnotating || SnappingManager.GetIsDragging() ? "all" : "none"} />;
         return <div className="mapBox" ref={this._ref}>
-            {console.log(apiKey)}
+            {/*console.log(apiKey)*/}
             {/* <LoadScript
                 googleMapsApiKey={apiKey!}
                 libraries={['places', 'drawing']}
@@ -642,9 +559,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     </Autocomplete>
 
                     {this.renderMarkers()}
-                    {this.allMapMarkers.map(place => (
-                        this.renderInfoWindow(place)
-                    ))}
+                    {this.allMapMarkers.filter(marker => marker.infoWindowOpen).map(marker => <MapBoxInfoWindow key={marker[Id]}
+                        {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
+                        place={marker}
+                        markerMap={this.markerMap}
+                        PanelWidth={this.infoWidth}
+                        PanelHeight={this.infoHeight}
+                        moveDocument={this.moveDocument}
+                        isAnyChildContentActive={this.isAnyChildContentActive}
+                        whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+                    />)}
                     {this.handleMapCenter(this._map)}
                 </GoogleMap>
                 {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) :
@@ -688,4 +612,4 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             </div>
         </div>;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
new file mode 100644
index 000000000..e6f98e5cf
--- /dev/null
+++ b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
@@ -0,0 +1,86 @@
+import { InfoWindow } from '@react-google-maps/api';
+import { action, computed } from 'mobx';
+import { observer } from "mobx-react";
+import * as React from "react";
+import { Doc } from '../../../../fields/Doc';
+import { Id } from '../../../../fields/FieldSymbols';
+import { emptyFunction, OmitKeys, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents } from '../../../../Utils';
+import { Docs } from '../../../documents/Documents';
+import { DocumentType } from '../../../documents/DocumentTypes';
+import { CollectionStackingView } from '../../collections/CollectionStackingView';
+import { CollectionViewType } from '../../collections/CollectionView';
+import { ViewBoxAnnotatableProps } from '../../DocComponent';
+import { FieldViewProps } from '../FieldView';
+import { FormattedTextBox } from '../formattedText/FormattedTextBox';
+import "./MapBox.scss";
+
+
+interface MapBoxInfoWindowProps {
+    place: Doc;
+    renderDepth: number;
+    markerMap: { [id: string]: google.maps.Marker };
+    isAnyChildContentActive: () => boolean;
+}
+@observer
+export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & ViewBoxAnnotatableProps & FieldViewProps>{
+
+    @action
+    private handleInfoWindowClose = () => {
+        if (this.props.place.infoWindowOpen) {
+            this.props.place.infoWindowOpen = false;
+        }
+        this.props.place.infoWindowOpen = false;
+    }
+
+    addNoteClick = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => {
+            const newBox = Docs.Create.TextDocument("Note", { _autoHeight: true });
+            FormattedTextBox.SelectOnLoad = newBox[Id];// track the new text box so we can give it a prop that tells it to focus itself when it's displayed
+            Doc.AddDocToList(this.props.place, "data", newBox);
+            e.stopPropagation();
+            e.preventDefault();
+        });
+    }
+
+    // Collection stacking view for documents in the infowindow of a map marker
+    @computed get renderChildDocs() {
+        return;
+    }
+    render() {
+        return <InfoWindow anchor={this.props.markerMap[this.props.place[Id]]} onCloseClick={this.handleInfoWindowClose} >
+            <div className="mapbox-infowindow">
+                <div style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight() }}>
+                    <CollectionStackingView
+                        {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
+                        Document={this.props.place}
+                        DataDoc={undefined}
+                        fieldKey="data"
+                        CollectionView={undefined}
+                        NativeWidth={returnZero}
+                        NativeHeight={returnZero}
+                        docFilters={returnEmptyFilter}
+                        setHeight={emptyFunction}
+                        isAnnotationOverlay={false}
+                        select={emptyFunction}
+                        scaling={returnOne}
+                        isContentActive={returnTrue}
+                        chromeHidden={true}
+                        rootSelected={returnFalse}
+                        childHideDecorationTitle={returnTrue}
+                        childFitWidth={doc => doc.type === DocumentType.RTF}
+                        // childDocumentsActive={returnFalse}
+                        removeDocument={(doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.RemoveDocFromList(this.props.place, "data", d), true as boolean)}
+                        addDocument={(doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.AddDocToList(this.props.place, "data", d), true as boolean)}
+                        renderDepth={this.props.renderDepth + 1}
+                        viewType={CollectionViewType.Stacking}
+                        pointerEvents="all"
+                    />
+                </div>
+                <hr />
+                <div onPointerDown={this.addNoteClick} onClick={e => { e.stopPropagation(); e.preventDefault(); }} >
+                    Add Note
+                </div>
+            </div>
+        </InfoWindow>;
+    }
+}
\ No newline at end of file