Merge branch 'master' into data-visualization-sarah

1 files changed, 537 insertions, 404 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index cf017d746..6f552953d 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1,31 +1,33 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Autocomplete, GoogleMap, GoogleMapProps, Marker } from '@react-google-maps/api';
 import BingMapsReact from 'bingmaps-react';
-import { action, computed, IReactionDisposer, observable, ObservableMap, runInAction } from 'mobx';
+import { Button, EditableText, IconButton, Type } from 'browndash-components';
+import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
-import { Width } from '../../../../fields/DocSymbols';
-import { Id } from '../../../../fields/FieldSymbols';
+import { Doc, DocListCast, Field, Opt } from '../../../../fields/Doc';
+import { DocCss, Highlight, Width } from '../../../../fields/DocSymbols';
 import { InkTool } from '../../../../fields/InkField';
-import { NumCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils';
-import { Docs } from '../../../documents/Documents';
+import { DocCast, NumCast, StrCast } from '../../../../fields/Types';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnOne, returnTrue, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { Docs, DocUtils } from '../../../documents/Documents';
+import { DocumentType } from '../../../documents/DocumentTypes';
+import { DocumentManager } from '../../../util/DocumentManager';
 import { DragManager } from '../../../util/DragManager';
+import { LinkManager } from '../../../util/LinkManager';
 import { SnappingManager } from '../../../util/SnappingManager';
-import { UndoManager } from '../../../util/UndoManager';
+import { Transform } from '../../../util/Transform';
+import { undoable, UndoManager } from '../../../util/UndoManager';
 import { MarqueeOptionsMenu } from '../../collections/collectionFreeForm';
 import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent';
 import { Colors } from '../../global/globalEnums';
 import { MarqueeAnnotator } from '../../MarqueeAnnotator';
-import { AnchorMenu } from '../../pdf/AnchorMenu';
-import { Annotation } from '../../pdf/Annotation';
 import { SidebarAnnos } from '../../SidebarAnnos';
+import { DocumentView } from '../DocumentView';
 import { FieldView, FieldViewProps } from '../FieldView';
-import { PinProps } from '../trails';
+import { PinProps, PresBox } from '../trails';
+import { MapAnchorMenu } from './MapAnchorMenu';
 import './MapBox.scss';
-import { MapBoxInfoWindow } from './MapBoxInfoWindow';
-
+// amongus
 /**
  * MapBox architecture:
  * Main component: MapBox.tsx
@@ -39,29 +41,7 @@ import { MapBoxInfoWindow } from './MapBoxInfoWindow';
  * 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 apiKey = process.env.GOOGLE_MAPS;
-
-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`;
-document.head.appendChild(script);
 
 /**
  * Consider integrating later: allows for drawing, circling, making shapes on map
@@ -79,245 +59,52 @@ document.head.appendChild(script);
 //     },
 // });
 
-// options for searchbox in Google Maps Places Autocomplete API
-const options = {
-    fields: ['formatted_address', 'geometry', 'name'], // note: level of details is charged by item per retrieval, not recommended to return all fields
-    strictBounds: false,
-    types: ['establishment'], // type pf places, subject of change according to user need
-} as google.maps.places.AutocompleteOptions;
-
 @observer
-export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps & Partial<GoogleMapProps>>() {
-    static UseBing = true;
-    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 _dragRef = React.createRef<HTMLDivElement>();
+    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 _isAnnotating = false;
-    @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 _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
     @computed get allSidebarDocs() {
         return DocListCast(this.dataDoc[this.SidebarKey]);
     }
-    @computed get allMapMarkers() {
+    // this list contains pushpins and configs
+    @computed get allAnnotations() {
         return DocListCast(this.dataDoc[this.annotationKey]);
     }
-    @observable private toggleAddMarker = false;
-    private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
-
-    @observable _showSidebar = false;
+    @computed get allPushpins() {
+        return this.allAnnotations.filter(anno => anno.type === DocumentType.PUSHPIN);
+    }
     @computed get SidebarShown() {
-        return this._showSidebar || this.layoutDoc._layout_showSidebar ? true : false;
+        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();
 
     componentDidMount() {
         this.props.setContentView?.(this);
     }
 
-    @action
-    private setSearchBox = (searchBox: any) => {
-        this.searchBox = searchBox;
-    };
-
-    // 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()));
-    };
-
-    /**
-     * Custom control for add marker button
-     * @param controlDiv
-     * @param map
-     */
-    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.borderRadius = '3px';
-        controlUI.style.cursor = 'pointer';
-        controlUI.style.marginTop = '10px';
-        controlUI.style.borderRadius = '4px';
-        controlUI.style.marginBottom = '22px';
-        controlUI.style.textAlign = 'center';
-        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 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', () => {
-            if (this.toggleAddMarker === true) {
-                this.toggleAddMarker = false;
-                console.log('add marker button status:' + this.toggleAddMarker);
-                controlUI.style.backgroundColor = '#fff';
-                markerIcon.style.color = 'rgb(25,25,25)';
-            } else {
-                this.toggleAddMarker = true;
-                console.log('add marker button status:' + this.toggleAddMarker);
-                controlUI.style.backgroundColor = '#4476f7';
-                markerIcon.style.color = 'rgb(255,255,255)';
-            }
-        });
-        controlDiv.appendChild(controlUI);
-        return controlDiv;
-    };
-
-    /**
-     * 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.MapMarkerDocument(NumCast(position.lat()), NumCast(position.lng()), false, [], {});
-        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
-     * fit map bounds to contain all markers
-     * @param map
-     */
-    @action
-    private loadHandler = (map: google.maps.Map) => {
-        this._map = map;
-        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.")
-        // };
-        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.freeform_fitContentsToBox && this.fitBounds(this._map);
-            }
-        }, 250);
-        // listener to addmarker event
-        this._map.addListener('click', (e: MouseEvent) => {
-            if (this.toggleAddMarker === true) {
-                this.placeMarker((e as any).latLng, map);
-            }
-        });
-    };
-
-    @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();
-    };
-
-    /**
-     * 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;
-    };
+    componentWillUnmount(): void {
+        this.deselectPin();
+        Object.keys(this._disposers).forEach(key => this._disposers[key]?.());
+    }
 
     /**
      * Called when dragging documents into map sidebar or directly into infowindow; to create a map marker, ref to MapMarkerDocument in Documents.ts
@@ -326,18 +113,23 @@ 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 => {
-            if (doc.lat !== undefined && doc.lng !== undefined) {
-                const existingMarker = this.allMapMarkers.find(marker => marker.lat === doc.lat && marker.lng === doc.lng);
-                if (existingMarker) {
-                    Doc.AddDocToList(existingMarker, 'data', doc);
-                } else {
-                    const marker = Docs.Create.MapMarkerDocument(NumCast(doc.lat), NumCast(doc.lng), false, [doc], {});
-                    this.addDocument(marker, this.annotationKey);
-                }
+            let existingPin = this.allPushpins.find(pin => pin.latitude === doc.latitude && pin.longitude === doc.longitude) ?? this.selectedPin;
+            if (doc.latitude !== undefined && doc.longitude !== undefined && !existingPin) {
+                existingPin = this.createPushpin(NumCast(doc.latitude), NumCast(doc.longitude), StrCast(doc.map));
+            }
+            if (existingPin) {
+                setTimeout(() => {
+                    // we use a timeout in case this is called from the sidebar which may have just added a link that hasn't made its way into th elink manager yet
+                    if (!LinkManager.Instance.getAllRelatedLinks(doc).some(link => DocCast(link.link_anchor_1)?.mapPin === existingPin || DocCast(link.link_anchor_2)?.mapPin === existingPin)) {
+                        const anchor = this.getAnchor(true, undefined, existingPin);
+                        anchor && DocUtils.MakeLink(anchor, doc, { link_relationship: 'link to map location' });
+                        doc.latitude = existingPin?.latitude;
+                        doc.longitude = existingPin?.longitude;
+                    }
+                });
             }
         }); //add to annotation list
 
@@ -350,11 +142,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
@@ -373,11 +161,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     const fullWidth = this.layoutDoc[Width]();
                     const mapWidth = fullWidth - this.sidebarWidth();
                     if (this.sidebarWidth() + localDelta[0] > 0) {
-                        this._showSidebar = true;
+                        this.layoutDoc._layout_showSidebar = true;
                         this.layoutDoc._width = fullWidth + localDelta[0];
                         this.layoutDoc._layout_sidebarWidthPercent = ((100 * (this.sidebarWidth() + localDelta[0])) / (fullWidth + localDelta[0])).toString() + '%';
                     } else {
-                        this._showSidebar = false;
+                        this.layoutDoc._layout_showSidebar = false;
                         this.layoutDoc._width = mapWidth;
                         this.layoutDoc._layout_sidebarWidthPercent = '0%';
                     }
@@ -387,60 +175,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'));
-    }
-
-    /**
-     * 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,
-            })
-        );
-    };
+    sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth();
 
     /**
      * Handles toggle of sidebar on click the little comment button
@@ -465,12 +200,28 @@ 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 = () => {
+        const createFunc = undoable(
+            action(() => {
+                const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(false), ['latitude', 'longitude', '-linkedTo']);
+                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);
     };
@@ -503,48 +254,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     };
     @action finishMarquee = (x?: number, y?: number) => {
         this._marqueeing = undefined;
-        this._isAnnotating = false;
         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>
-        );
-    }
-
-    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)} />
-        ));
-    };
-
-    // 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());
-        // }
-    };
-
     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));
@@ -581,24 +297,402 @@ 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(),
                 });
             }
         });
     };
 
+    @observable
+    bingSearchBarContents: any = this.rootDoc.map; // For Bing Maps: The contents of the Bing search bar (string)
+
+    geoDataRequestOptions = {
+        entityType: 'PopulatedPlace',
+    };
+
+    // incrementer: number = 0;
+    /*
+     * Creates Pushpin doc and adds it to the list of annotations
+     */
+    @action
+    createPushpin = undoable((latitude: number, longitude: number, map?: string) => {
+        // Stores the pushpin as a MapMarkerDocument
+        const pushpin = Docs.Create.PushpinDocument(
+            NumCast(latitude),
+            NumCast(longitude),
+            false,
+            [],
+            { map: map }
+            // ,'pushpinIDamongus'+ this.incrementer++
+        );
+        this.addDocument(pushpin, this.annotationKey);
+        return pushpin;
+        // mapMarker.infoWindowOpen = true;
+    }, 'createpin');
+
+    // The pin that is selected
+    @observable selectedPin: Doc | undefined;
+
+    @action
+    deselectPin = () => {
+        if (this.selectedPin) {
+            // Removes filter
+            Doc.setDocFilter(this.rootDoc, 'latitude', this.selectedPin.latitude, 'remove');
+            Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPin.longitude, 'remove');
+            Doc.setDocFilter(this.rootDoc, '-linkedTo', Field.toString(DocCast(this.selectedPin.mapPin)), 'removeAll');
+
+            const temp = this.selectedPin;
+            this._bingMap.current.entities.remove(this.map_docToPinMap.get(temp));
+            const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(temp.latitude, temp.longitude));
+            this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(temp as Doc));
+            this._bingMap.current.entities.push(newpin);
+            this.map_docToPinMap.set(temp, newpin);
+            this.selectedPin = undefined;
+            this.bingSearchBarContents = this.rootDoc.map;
+        }
+    };
+
+    getView = async (doc: Doc) => {
+        if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) this.toggleSidebar();
+        return new Promise<Opt<DocumentView>>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv)));
+    };
+    /*
+     * Pushpin onclick
+     */
+    @action
+    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.longitude, 'match');
+        Doc.setDocFilter(this.rootDoc, '-linkedTo', Field.toScriptString(this.selectedPin), 'mapPin' as any);
+
+        this.recolorPin(this.selectedPin, 'green');
+
+        MapAnchorMenu.Instance.Delete = this.deleteSelectedPin;
+        MapAnchorMenu.Instance.Center = this.centerOnSelectedPin;
+        MapAnchorMenu.Instance.LinkNote = this.createNoteAnnotation;
+
+        const point = this._bingMap.current.tryLocationToPixel(new this.MicrosoftMaps.Location(this.selectedPin.latitude, this.selectedPin.longitude));
+        const x = point.x + (this.props.PanelWidth() - this.sidebarWidth()) / 2;
+        const y = point.y + this.props.PanelHeight() / 2 + 32;
+        const cpt = this.props.ScreenToLocalTransform().inverse().transformPoint(x, y);
+        MapAnchorMenu.Instance.jumpTo(cpt[0], cpt[1], true);
+
+        document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
+    };
+
+    /**
+     * Map OnClick
+     */
+    @action
+    mapOnClick = (e: { location: { latitude: any; longitude: any } }) => {
+        this.props.select(false);
+        this.deselectPin();
+    };
+    /*
+     * Updates values of layout doc to match the current map
+     */
+    @action
+    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.map_type = this._bingMap.current.getMapTypeId());
+
+    /*
+     * For Bing Maps
+     * Called by search button's onClick
+     * Finds the geocode of the searched contents and sets location to that location
+     **/
+    @action
+    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;
+        });
+    };
+
+    /*
+     * Returns doc w/ relevant info
+     */
+    getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps, existingPin?: Doc) => {
+        /// this should use SELECTED pushpin for lat/long  if there is a selection, otherwise CENTER
+        const anchor = Docs.Create.ConfigDocument({
+            title: 'MapAnchor:' + this.rootDoc.title,
+            text: StrCast(this.selectedPin?.map) || StrCast(this.rootDoc.map) || 'map location',
+            config_latitude: NumCast((existingPin ?? this.selectedPin)?.latitude ?? this.dataDoc.latitude),
+            config_longitude: NumCast((existingPin ?? this.selectedPin)?.longitude ?? this.dataDoc.longitude),
+            config_map_zoom: NumCast(this.dataDoc.map_zoom),
+            config_map_type: StrCast(this.dataDoc.map_type),
+            config_map: StrCast((existingPin ?? this.selectedPin)?.map) || StrCast(this.dataDoc.map),
+            layout_unrendered: true,
+        });
+        if (anchor) {
+            anchor.mapPin = existingPin ?? this.selectedPin;
+            if (!addAsAnnotation) anchor.backgroundColor = 'transparent';
+            /* addAsAnnotation &&*/ this.addDocument(anchor);
+            PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), map: true } }, this.rootDoc);
+            return anchor;
+        }
+        return this.rootDoc;
+    };
+
+    map_docToPinMap = new Map<Doc, any>();
+    map_pinHighlighted = new Map<Doc, boolean>();
+    /*
+     *   Input: pin doc
+     *   Adds MicrosoftMaps Pushpin to the map (render)
+     */
+    @action
+    addPushpin = (pin: Doc) => {
+        const pushPin = pin.infoWindowOpen
+            ? new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.latitude, pin.longitude), {})
+            : new this.MicrosoftMaps.Pushpin(
+                  new this.MicrosoftMaps.Location(pin.latitude, pin.longitude)
+                  // {icon: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Outside-Chartreuse-icon.png'}
+              );
+
+        this._bingMap.current.entities.push(pushPin);
+
+        this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e: any) => this.pushpinClicked(pin));
+        // this.MicrosoftMaps.Events.addHandler(pushPin, 'dblclick', (e: any) => this.pushpinDblClicked(pushPin, pin));
+        this.map_docToPinMap.set(pin, pushPin);
+    };
+
+    /*
+     *   Input: pin doc
+     *   Removes pin from annotations
+     */
+    @action
+    removePushpin = (pinDoc: Doc) => this.removeDocument(pinDoc, this.annotationKey);
+
+    /*
+     * Removes pushpin from map render
+     */
+    deletePushpin = (pinDoc: Doc) => {
+        this._bingMap.current.entities.remove(this.map_docToPinMap.get(pinDoc));
+        this.map_docToPinMap.delete(pinDoc);
+        this.selectedPin = undefined;
+    };
+
+    @action
+    deleteSelectedPin = undoable(() => {
+        if (this.selectedPin) {
+            // Removes filter
+            Doc.setDocFilter(this.rootDoc, 'latitude', this.selectedPin.latitude, 'remove');
+            Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPin.longitude, 'remove');
+            Doc.setDocFilter(this.rootDoc, '-linkedTo', Field.toString(DocCast(this.selectedPin.mapPin)), 'removeAll');
+
+            this.removePushpin(this.selectedPin);
+        }
+        MapAnchorMenu.Instance.fadeOut(true);
+        document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
+    }, 'delete pin');
+
+    tryHideMapAnchorMenu = (e: PointerEvent) => {
+        let target = document.elementFromPoint(e.x, e.y);
+        while (target) {
+            if (target === MapAnchorMenu.top.current) return;
+            target = target.parentElement;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        MapAnchorMenu.Instance.fadeOut(true);
+        document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
+    };
+
+    @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);
+    };
+
+    /**
+     * View options for bing maps
+     */
     bingViewOptions = {
-        center: { latitude: defaultCenter.lat, longitude: defaultCenter.lng },
+        // center: { latitude: this.dataDoc.latitude ?? defaultCenter.lat, longitude: this.dataDoc.longitude ?? defaultCenter.lng },
+        zoom: this.dataDoc.latitude ?? 10,
         mapTypeId: 'grayscale',
     };
+
+    /**
+     * Map options
+     */
     bingMapOptions = {
         navigationBarMode: 'square',
+        backgroundColor: '#f1f3f4',
+        enableInertia: true,
+        supportedMapTypes: ['grayscale', 'canvasLight'],
+        disableMapTypeSelectorMouseOver: true,
+        // showScalebar:true
+        // disableRoadView:true,
+        // disableBirdseye:true
+        streetsideOptions: {
+            showProblemReporting: false,
+            showCurrentAddress: false,
+        },
     };
-    bingMapReady = (map: any) => (this._bingMap = map.map);
+
+    @action
+    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 } : {});
+        this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(pin));
+        this._bingMap.current.entities.push(newpin);
+        this.map_docToPinMap.set(pin, newpin);
+    };
+
+    /*
+     * Called when BingMap is first rendered
+     * Initializes starting values
+     */
+    @observable _mapReady = false;
+    @action
+    bingMapReady = (map: any) => {
+        this._mapReady = true;
+        this._bingMap = map.map;
+        if (!this._bingMap.current) {
+            alert('NO Map!?');
+        }
+        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick);
+        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._disposers.mapLocation = reaction(
+            () => this.rootDoc.map,
+            mapLoc => (this.bingSearchBarContents = mapLoc),
+            { fireImmediately: true }
+        );
+        this._disposers.highlight = reaction(
+            () => this.allAnnotations.map(doc => doc[Highlight]),
+            () => {
+                const allConfigPins = this.allAnnotations.map(doc => ({ doc, pushpin: DocCast(doc.mapPin) })).filter(pair => pair.pushpin);
+                allConfigPins.forEach(({ doc, pushpin }) => {
+                    if (!pushpin[Highlight] && this.map_pinHighlighted.get(pushpin)) {
+                        this.recolorPin(pushpin);
+                        this.map_pinHighlighted.delete(pushpin);
+                    }
+                });
+                allConfigPins.forEach(({ doc, pushpin }) => {
+                    if (doc[Highlight] && !this.map_pinHighlighted.get(pushpin)) {
+                        this.recolorPin(pushpin, 'orange');
+                        this.map_pinHighlighted.set(pushpin, true);
+                    }
+                });
+            },
+            { fireImmediately: true }
+        );
+
+        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 {
+                    locationObject?.zoom &&
+                        this._bingMap.current?.setView({
+                            mapTypeId: locationObject.mapType,
+                            zoom: locationObject.zoom,
+                            center: new this.MicrosoftMaps.Location(locationObject.lat, locationObject.lng),
+                        });
+                } catch (e) {
+                    console.log(e);
+                }
+            },
+            { fireImmediately: true }
+        );
+    };
+
+    dragToggle = (e: React.PointerEvent) => {
+        let dragClone: HTMLDivElement | undefined;
+
+        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();
+            }
+        );
+    };
+
+    searchbarKeyDown = (e: any) => e.key === 'Enter' && this.bingSearch();
+
+    static _firstRender = true;
+    static _rerenderDelay = 0;
+    _rerenderTimeout: any;
     render() {
+        // bcz:  no idea what's going on here, but bings maps have some kind of bug
+        // such that we need to delay rendering a second map on startup until the first map is rendered.
+        this.rootDoc[DocCss];
+        if (MapBox._firstRender) {
+            MapBox._firstRender = false;
+            MapBox._rerenderDelay = 500;
+        } else if (MapBox._rerenderDelay) {
+            // prettier-ignore
+            this._rerenderTimeout = this._rerenderTimeout ??
+                setTimeout(action(() => {
+                    MapBox._rerenderDelay = 0;
+                    this.rootDoc[DocCss] = this.rootDoc[DocCss] + 1;
+                }), MapBox._rerenderDelay);
+            return null;
+        }
+
         const renderAnnotations = (childFilters?: () => string[]) => null;
         return (
             <div className="mapBox" ref={this._ref}>
@@ -607,47 +701,86 @@ 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}
-
-                    {!MapBox.UseBing ? null : <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions} />}
-                    <div style={{ display: MapBox.UseBing ? 'none' : undefined }}>
-                        <GoogleMap mapContainerStyle={mapContainerStyle} onZoomChanged={this.zoomChanged} onCenterChanged={this.centered} onLoad={this.loadHandler} options={mapOptions}>
-                            <Autocomplete onLoad={this.setSearchBox} onPlaceChanged={this.handlePlaceChanged}>
-                                <input className="mapBox-input" ref={this.inputRef} type="text" onKeyDown={e => e.stopPropagation()} placeholder="Enter location" />
-                            </Autocomplete>
-
-                            {this.renderMarkers()}
-                            {this.allMapMarkers
-                                .filter(marker => marker.infoWindowOpen)
-                                .map(marker => (
-                                    <MapBoxInfoWindow
-                                        key={marker[Id]}
-                                        {...this.props}
-                                        setContentView={emptyFunction}
-                                        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>
+
+                    <div className="mapBox-searchbar">
+                        <EditableText
+                            // editing
+                            setVal={(newText: string | number) => typeof newText === 'string' && this.searchbarOnEdit(newText)}
+                            onEnter={e => this.bingSearch()}
+                            placeholder={this.bingSearchBarContents || 'enter city/zip/...'}
+                            textAlign="center"
+                        />
+                        <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}
+                            type={Type.TERT}
+                        />
+                        <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} //
+                        bingMapsKey={bingApiKey}
+                        height="100%"
+                        mapOptions={this.bingMapOptions}
+                        width="100%"
+                        viewOptions={this.bingViewOptions}
+                    />
+                    <div>
+                        {!this._mapReady
+                            ? null
+                            : this.allAnnotations
+                                  .filter(anno => !anno.layout_unrendered)
+                                  .map(pushpin => (
+                                      <DocumentView
+                                          {...this.props}
+                                          renderDepth={this.props.renderDepth + 1}
+                                          Document={pushpin}
+                                          DataDoc={undefined}
+                                          PanelWidth={returnOne}
+                                          PanelHeight={returnOne}
+                                          NativeWidth={returnOne}
+                                          NativeHeight={returnOne}
+                                          onKey={undefined}
+                                          onDoubleClick={undefined}
+                                          onBrowseClick={undefined}
+                                          childFilters={returnEmptyFilter}
+                                          childFiltersByRanges={returnEmptyFilter}
+                                          searchFilterDocs={returnEmptyDoclist}
+                                          isDocumentActive={returnFalse}
+                                          isContentActive={returnFalse}
+                                          addDocTab={returnFalse}
+                                          ScreenToLocalTransform={Transform.Identity}
+                                          fitContentsToBox={undefined}
+                                          focus={returnOne}
+                                      />
+                                  ))}
                     </div>
+                    {/* <MapBoxInfoWindow
+                                    key={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})[Id]}
+                                    {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
+                                    place={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})}
+                                    markerMap={this.markerMap}
+                                    PanelWidth={this.infoWidth}
+                                    PanelHeight={this.infoHeight}
+                                    moveDocument={this.moveDocument}
+                                    isAnyChildContentActive={this.isAnyChildContentActive}
+                                    whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+                                /> */}
+
                     {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : (
                         <MarqueeAnnotator
                             rootDoc={this.rootDoc}
@@ -666,7 +799,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     )}
                 </div>
                 {/* </LoadScript > */}
-                <div className="mapBox-sidebar" style={{ position: 'absolute', right: 0, height: '100%', width: `${this.layout_sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
+                <div className="mapBox-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
                     <SidebarAnnos
                         ref={this._sidebarRef}
                         {...this.props}