formatting mapbox

4 files changed, 151 insertions, 274 deletions

diff --git a/package-lock.json b/package-lock.json
index 196906718..111d1838a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5597,6 +5597,16 @@
             "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
             "dev": true
         },
+        "d": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+            "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+            "dev": true,
+            "requires": {
+                "es5-ext": "^0.10.50",
+                "type": "^1.0.1"
+            }
+        },
         "d3": {
             "version": "7.8.4",
             "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.4.tgz",
@@ -6977,6 +6987,28 @@
                 "is-symbol": "^1.0.2"
             }
         },
+        "es5-ext": {
+            "version": "0.10.62",
+            "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
+            "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
+            "dev": true,
+            "requires": {
+                "es6-iterator": "^2.0.3",
+                "es6-symbol": "^3.1.3",
+                "next-tick": "^1.1.0"
+            }
+        },
+        "es6-iterator": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+            "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+            "dev": true,
+            "requires": {
+                "d": "1",
+                "es5-ext": "^0.10.35",
+                "es6-symbol": "^3.1.1"
+            }
+        },
         "es6-promise": {
             "version": "3.2.1",
             "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz",
@@ -6988,6 +7020,7 @@
             "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
             "dev": true,
             "requires": {
+                "d": "^1.0.1",
                 "ext": "^1.1.2"
             }
         },
@@ -22660,6 +22693,12 @@
             "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
             "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
         },
+        "type": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+            "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
+            "dev": true
+        },
         "type-check": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index fb15520f6..539c506c7 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -1,87 +1,92 @@
-@import "../../global/globalCssVariables.scss";
+@import '../../global/globalCssVariables.scss';
 .mapBox {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
 
-        .mapBox-infoWindow {
-            background-color: white;
-            opacity: 0.75;
-            padding: 12; 
-            font-size: 17;
-        }
+    .mapBox-infoWindow {
+        background-color: white;
+        opacity: 0.75;
+        padding: 12;
+        font-size: 17;
+    }
 
-        .mapBox-overlayButton-sidebar {
-            background: #121721;
-            height: 25px;
-            width: 25px;
-            right: 5px;
-            display: flex;
-            position: absolute;
-            align-items: center;
-            justify-content: center;
-            border-radius: 3px;
-            pointer-events: all;
-            z-index: 1; // so it appears on top of the document's title, if shown
-    
-            box-shadow: $standard-box-shadow;
-            transition: 0.2s;
-    
-            &:hover{
-                filter: brightness(0.85);
-            }
-        }
+    .mapBox-overlayButton-sidebar {
+        background: #121721;
+        height: 25px;
+        width: 25px;
+        right: 5px;
+        display: flex;
+        position: absolute;
+        align-items: center;
+        justify-content: center;
+        border-radius: 3px;
+        pointer-events: all;
+        z-index: 1; // so it appears on top of the document's title, if shown
 
-        .mapBox-wrapper {
-            width: 100%;
-            .mapBox-input {
-                box-sizing: border-box;
-                border: 1px solid transparent;
-                width: 240px;
-                height: 32px;
-                padding: 0 12px;
-                border-radius: 3px;
-                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-                font-size: 14px;
-                outline: none;
-                text-overflow: ellipses;
-                position: absolute;
-                left: 50%;
-                margin-left: -120px;
-            }
-        }
+        box-shadow: $standard-box-shadow;
+        transition: 0.2s;
 
-        .mapBox-sidebar-handle {
-            top: 0;
-            //top: calc(50% - 17.5px);  // use this to center vertically -- make sure it looks okay for slide views
-            width: 10px;
-            height: 100%;
-            max-height: 35px;
-            background: lightgray;
-            border-radius: 20px;
-            cursor:grabbing;
+        &:hover {
+            filter: brightness(0.85);
         }
-        .mapBox-addMarker {
+    }
+
+    .mapBox-wrapper {
+        width: 100%;
+        .mapBox-input {
+            box-sizing: border-box;
+            border: 1px solid transparent;
+            width: 240px;
+            height: 32px;
+            padding: 0 12px;
+            border-radius: 3px;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+            font-size: 14px;
+            outline: none;
+            text-overflow: ellipses;
+            position: absolute;
             left: 50%;
-            margin-left: 120px;
-            right: unset !important;
-            margin-top: -10;
-            height: max-content;
-        }
-        .searchbox {
-            display:none;
-        }
-        .mapBox-addMarker {
-            display:none;
+            margin-left: -120px;
         }
+    }
+    .mapBox-sidebar {
+        position: absolute;
+        right: 0;
+        height: 100%;
+    }
+
+    .mapBox-sidebar-handle {
+        top: 0;
+        //top: calc(50% - 17.5px);  // use this to center vertically -- make sure it looks okay for slide views
+        width: 10px;
+        height: 100%;
+        max-height: 35px;
+        background: lightgray;
+        border-radius: 20px;
+        cursor: grabbing;
+    }
+    .mapBox-addMarker {
+        left: 50%;
+        margin-left: 120px;
+        right: unset !important;
+        margin-top: -10;
+        height: max-content;
+    }
+    .searchbox {
+        display: none;
+    }
+    .mapBox-addMarker {
+        display: none;
+    }
 }
 
 .mapBox:hover {
     .mapBox-addMarker {
-        display:block;
+        display: block;
     }
     .searchbox {
-        display :block;
+        display: block;
     }
 }
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index c44f5765a..06021921c 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -55,14 +55,6 @@ const mapOptions = {
 };
 
 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`;
-console.log(script.src);
-document.head.appendChild(script);
 
 /**
  * Consider integrating later: allows for drawing, circling, making shapes on map
@@ -89,7 +81,6 @@ const options = {
 
 @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();
@@ -111,7 +102,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @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);
@@ -139,11 +129,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         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();
@@ -503,7 +488,6 @@ 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);
     };
 
@@ -813,33 +797,32 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     {SnappingManager.GetIsDragging() ? null : renderAnnotations()}
                     {this.annotationLayer}
 
-                    {!MapBox.UseBing ? null : <EditableText editing onEdit={(newText: string) => (this.bingSearchBarContents = newText)} placeholder="..." size="medium" text="Boston, MA" onKeyPress={(e: { key: any }) => console.log(e.key)} />}
-
-                    {!MapBox.UseBing ? null : <input type="button" value="Search" onClick={this.bingSearch} />}
-
-                    {!MapBox.UseBing ? null : this.placePinOn ? <input type="button" value="Place Pin Mode On" onClick={this.togglePlacePin} /> : <input type="button" value="Place Pin Mode Off" onClick={this.togglePlacePin} />}
-
-                    {!MapBox.UseBing ? null : (
-                        <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions}>
-                            {this.allMapPushpins
-                                .filter(marker => marker.infoWindowOpen)
-                                .map(marker => (
-                                    // console.log('this is a marker window')
-                                    <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}
-                                    />
-                                ))}
-                        </BingMapsReact>
-                    )}
+                    <EditableText setEditing={(isEditing: boolean) => ({})} editing onEdit={(newText: string) => (this.bingSearchBarContents = newText)} placeholder="..." text="Boston, MA" />
+
+                    <input type="button" value="Search" onClick={this.bingSearch} />
+
+                    {this.placePinOn ? <input type="button" value="Place Pin Mode On" onClick={this.togglePlacePin} /> : <input type="button" value="Place Pin Mode Off" onClick={this.togglePlacePin} />}
+
+                    <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions}>
+                        {this.allMapPushpins
+                            .filter(marker => marker.infoWindowOpen)
+                            .map(marker => (
+                                // console.log('this is a marker window')
+                                <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}
+                                />
+                            ))}
+                    </BingMapsReact>
+
                     {/* <MapBoxInfoWindow
                                     key={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})[Id]}
                                     {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
@@ -870,7 +853,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     )}
                 </div>
                 {/* </LoadScript > */}
-                <div className="mapBox-sidebar" style={{ position: 'absolute', right: 0, height: '100%', width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
+                <div className="mapBox-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
                     <SidebarAnnos
                         ref={this._sidebarRef}
                         {...this.props}
diff --git a/src/client/views/nodes/MapBox/MapBox2.tsx b/src/client/views/nodes/MapBox/MapBox2.tsx
index 4c28d4df1..e3eeaba26 100644
--- a/src/client/views/nodes/MapBox/MapBox2.tsx
+++ b/src/client/views/nodes/MapBox/MapBox2.tsx
@@ -1,7 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Autocomplete, GoogleMap, GoogleMapProps, Marker } from '@react-google-maps/api';
-import BingMapsReact from 'bingmaps-react';
-import { EditableText } from 'browndash-components';
 import { action, computed, IReactionDisposer, observable, ObservableMap, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -9,7 +7,7 @@ import { Doc, DocListCast, Opt, WidthSym } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { NumCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, OmitKeys, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { emptyFunction, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils';
 import { Docs } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
 import { SnappingManager } from '../../../util/SnappingManager';
@@ -54,7 +52,6 @@ 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');
@@ -88,15 +85,14 @@ const options = {
 } as google.maps.places.AutocompleteOptions;
 
 @observer
-export class MapBox2 extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps & Partial<GoogleMapProps>>() {
-    static UseBing = true;
+export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps & Partial<GoogleMapProps>>() {
     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));
     public static LayoutString(fieldKey: string) {
-        return FieldView.LayoutString(MapBox2, fieldKey);
+        return FieldView.LayoutString(MapBox, fieldKey);
     }
     public get SidebarKey() {
         return this.fieldKey + '-sidebar';
@@ -557,113 +553,9 @@ export class MapBox2 extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick;
     savedAnnotations = () => this._savedAnnotations;
 
-    _bingSearchManager: any;
-    _bingMap: any;
     get MicrosoftMaps() {
         return (window as any).Microsoft.Maps;
     }
-    // uses Bing Search to retrieve lat/lng for a location.  eg.,
-    //   const results = this.geocodeQuery(map.map, 'Philadelphia, PA');
-    // to move the map to that location:
-    //     const location = await this.geocodeQuery(this._bingMap, 'Philadelphia, PA');
-    //     this._bingMap.current.setView({
-    //        mapTypeId: this.MicrosoftMaps.MapTypeId.aerial,
-    //        center: new this.MicrosoftMaps.Location(loc.latitude, loc.longitude),
-    //     });
-    //
-    bingGeocode = (map: any, query: string) => {
-        return new Promise<{ latitude: number; longitude: number }>((res, reject) => {
-            //If search manager is not defined, load the search module.
-            if (!this._bingSearchManager) {
-                //Create an instance of the search manager and call the geocodeQuery function again.
-                this.MicrosoftMaps.loadModule('Microsoft.Maps.Search', () => {
-                    this._bingSearchManager = new this.MicrosoftMaps.Search.SearchManager(map.current);
-                    res(this.bingGeocode(map, query));
-                });
-            } else {
-                this._bingSearchManager.geocode({   
-                    where: query,
-                    callback: action((r: any) => {
-                        res(r.results[0].location);
-                    }),
-                    errorCallback: (e: any) => reject(),
-                });
-            }
-        });
-    };
-
-
-
-
-    bingSearchBarContents: any = "Boston, MA"; // For Bing Maps: The contents of the Bing search bar (string)
-
-    /*
-     * For Bing Maps
-     * Called by search button's onClick 
-     * Finds the geocode of the searched contents and sets location to that location
-    **/
-   @action
-     bingSearch = async() =>{
-
-        // clear all pins
-        this._bingMap.current.entities.clear();
-
-        const location = await this.bingGeocode(this._bingMap, this.bingSearchBarContents);
-
-        // this.rootDoc.latitude =location.latitude;
-        // this.rootDoc.longitude =location.longitude; // TODO: How to update the rootDoc with the correct info?
-        //DocComponents file is where rootDoc is
-
-        // call a helper method that updates the this._bingMap.current.setView, 
-        // replaces this method call below
-        this._bingMap.current.setView({
-           center: new this.MicrosoftMaps.Location(location.latitude, location.longitude),
-        //    zoom: ,
-        });
-
-        //Create custom Pushpin
-        var pin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(location.latitude, location.longitude), {
-            title: this.bingSearchBarContents,
-            subTitle: 'subtitle here',
-            text: '1'
-        });
-
-        //Add the pushpin to the map
-        this._bingMap.current.entities.push(pin);
-        // const mapMarker = Docs.Create.MapMarkerDocument(this._bingMap.location.latitude, this._bingMap.location.latitude, false, [], {});
-        //     this.addDocument(mapMarker, this.annotationKey); // tells mapbox to add this marker to set of annotations on doc
-    }
-
-
-    // /**
-    //  * For Bing Maps
-    //  * Place the marker on bing 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);
-    // };
-
-
-
-
-
-    bingViewOptions = {
-        center: { latitude: defaultCenter.lat, longitude: defaultCenter.lng },// TODO: latitude: this.rootDoc.latitude, longitude: this.rootDoc.longitude
-        mapTypeId: 'grayscale',
-    };
-    bingMapOptions = {
-        navigationBarMode: 'square',
-    };
-    bingMapReady = (map: any) => (this._bingMap = map.map);
     render() {
         const renderAnnotations = (docFilters?: () => string[]) => null;
         return (
@@ -673,57 +565,14 @@ export class MapBox2 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.sidebarWidthPercent})` }}>
-
-                        
+                    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}
 
-
-
-                    {!MapBox2.UseBing ? null : 
-                    <EditableText editing 
-                        onEdit={(newText: string) => this.bingSearchBarContents = newText}
-                        placeholder="..."
-                        size="medium" 
-                        text="Boston, MA"
-                        onKeyPress={e => console.log(e.key)}
-                    />}
-                    
-                    {!MapBox2.UseBing ? null : 
-                    <input type="button" value="Search" 
-                    onClick={this.bingSearch}/>}
-                
-
-                    {!MapBox2.UseBing ? null : <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions} />}
-                    {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}
-                                    />
-                                ))}
-
-
-                    <div style={{ display: MapBox2.UseBing ? 'none' : undefined }}>
+                    <div>
                         <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" />
@@ -735,7 +584,8 @@ export class MapBox2 extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                                 .map(marker => (
                                     <MapBoxInfoWindow
                                         key={marker[Id]}
-                                        {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
+                                        {...this.props}
+                                        setContentView={emptyFunction}
                                         place={marker}
                                         markerMap={this.markerMap}
                                         PanelWidth={this.infoWidth}
@@ -748,7 +598,6 @@ export class MapBox2 extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             {/* {this.handleMapCenter(this._map)} */}
                         </GoogleMap>
                     </div>
-
                     {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : (
                         <MarqueeAnnotator
                             rootDoc={this.rootDoc}
@@ -767,7 +616,7 @@ export class MapBox2 extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     )}
                 </div>
                 {/* </LoadScript > */}
-                <div className="mapBox-sidebar" style={{ position: 'absolute', right: 0, height: '100%', width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
+                <div className="mapBox-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
                     <SidebarAnnos
                         ref={this._sidebarRef}
                         {...this.props}
@@ -775,6 +624,7 @@ export class MapBox2 extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         rootDoc={this.rootDoc}
                         layoutDoc={this.layoutDoc}
                         dataDoc={this.dataDoc}
+                        usePanelWidth={true}
                         showSidebar={this.SidebarShown}
                         nativeWidth={NumCast(this.layoutDoc._nativeWidth)}
                         whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}