fixing some bugs with MapBox and MapAnchorMenu

3 files changed, 204 insertions, 222 deletions

diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
index b1fb3368c..1b1b74e7c 100644
--- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
@@ -20,6 +20,7 @@ import { List } from '../../../../fields/List';
 import { MarkerIcons } from './MarkerIcons';
 import { CirclePicker, ColorResult } from 'react-color';
 import { Position } from 'geojson';
+import { CalendarManager } from '../../../util/CalendarManager';
 
 type MapAnchorMenuType = 'standard' | 'routeCreation' | 'calendar' | 'customize' | 'route';
 
@@ -45,13 +46,15 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     public IsTargetToggler: () => boolean = returnFalse;
 
     public DisplayRoute: (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => void = unimplementedFunction;
-    public HideRoute: () => void = unimplementedFunction;
     public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: any, createPinForDestination: boolean) => void = unimplementedFunction;
     public CreatePin: (feature: any) => void = unimplementedFunction;
 
     public UpdateMarkerColor: (color: string) => void = unimplementedFunction;
     public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction;
 
+
+    public Hide: () => void = unimplementedFunction;
+
     public OpenAnimationPanel: (routeDoc: Doc | undefined) => void = unimplementedFunction;
 
     @observable
@@ -70,14 +73,31 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
 
     private title: string | undefined = undefined;
 
-    public setPinDoc(pinDoc: Doc) {
-        this.pinDoc = pinDoc;
-        this.title = StrCast(pinDoc.title ? pinDoc.title : `${NumCast(pinDoc.longitude)}, ${NumCast(pinDoc.latitude)}`);
+    public setPinDoc(pinDoc: Doc | undefined) {
+        if (pinDoc){
+            this.pinDoc = pinDoc;
+            this.title = StrCast(pinDoc.title ? pinDoc.title : `${NumCast(pinDoc.longitude)}, ${NumCast(pinDoc.latitude)}`);
+        }
+        
     }
 
-    public setRouteDoc(routeDoc: Doc) {
-        this.routeDoc = routeDoc;
-        this.title = StrCast(routeDoc.title ?? 'Map route');
+    public setRouteDoc(routeDoc: Doc | undefined) {
+        if (routeDoc){
+            this.routeDoc = routeDoc;
+            this.title = StrCast(routeDoc.title ?? 'Map route');
+        }
+    }
+
+    @action
+    public Reset(){
+        this.destinationSelected = false;
+        this.currentRouteInfoMap = undefined;
+        this.destinationFeatures = [];
+        this.selectedDestinationFeature = undefined;
+        this.allMapPinDocs = [];
+        this.title = undefined;
+        this.routeDoc = undefined;
+        this.pinDoc = undefined;
     }
 
     public setAllMapboxPins(pinDocs: Doc[]) {
@@ -263,7 +283,6 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
             console.log(coordinates);
             console.log(this.selectedDestinationFeature);
             this.AddNewRouteToMap(coordinates, this.title ?? '', this.selectedDestinationFeature, this.createPinForDestination);
-            this.HideRoute();
         }
     };
 
@@ -277,86 +296,155 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         return undefined;
     };
 
+    getDirectionsButton: JSX.Element = (
+        <IconButton 
+            tooltip="Get directions" 
+            onPointerDown={this.DirectionsClick}
+            icon={<FontAwesomeIcon icon={faDiamondTurnRight as IconLookup} />} 
+            color={SettingsManager.userColor} />
+    )
+
+    getAddToCalendarButton = (docType: string): JSX.Element => {
+        return (
+            <IconButton 
+            tooltip="Add to calendar" 
+            onPointerDown={() => {
+                CalendarManager.Instance.open(undefined, docType === 'pin' ? this.pinDoc : this.routeDoc)
+            }} 
+            icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} 
+            color={SettingsManager.userColor} 
+            />
+        )
+       
+    }
+    addToCalendarButton: JSX.Element = (
+        <IconButton 
+            tooltip="Add to calendar" 
+            onPointerDown={() => CalendarManager.Instance.open(undefined, this.pinDoc)} 
+            icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} 
+            color={SettingsManager.userColor} />
+    )
+
+    getLinkNoteToDocButton = (docType: string): JSX.Element => {
+        return (
+            <div ref={this._commentRef}>
+                <IconButton
+                    tooltip={`Link Note to ${docType === 'pin' ? 'Pin' : 'Route'}`} //
+                    onPointerDown={this.notePointerDown}
+                    icon={<FontAwesomeIcon icon="sticky-note" />}
+                    color={SettingsManager.userColor}
+                />
+            </div>
+        )
+    }
+
+    linkNoteToPinOrRoutenButton: JSX.Element = (
+        <div ref={this._commentRef}>
+            <IconButton
+                tooltip="Link Note to Pin" //
+                onPointerDown={this.notePointerDown}
+                icon={<FontAwesomeIcon icon="sticky-note" />}
+                color={SettingsManager.userColor}
+            />
+        </div>
+    )
+
+    customizePinButton: JSX.Element = (
+        <IconButton 
+            tooltip="Customize pin" 
+            onPointerDown={this.CustomizeClick} 
+            icon={<FontAwesomeIcon icon={faEdit as IconLookup} />} 
+            color={SettingsManager.userColor} 
+        />
+    )
+
+    centerOnPinButton: JSX.Element = (
+        <IconButton
+            tooltip="Center on pin" //
+            onPointerDown={this.Center}
+            icon={<FontAwesomeIcon icon="compress-arrows-alt" />}
+            color={SettingsManager.userColor}
+        />
+    )
+
+    backButton: JSX.Element = (
+        <IconButton
+            tooltip="Go back" //
+            onPointerDown={this.BackClick}
+            icon={<FontAwesomeIcon icon={faArrowLeft as IconLookup} />}
+            color={SettingsManager.userColor}
+        />
+    )
+
+    addRouteButton: JSX.Element = (
+        <IconButton
+            tooltip="Add route" //
+            onPointerDown={this.HandleAddRouteClick}
+            icon={<FontAwesomeIcon icon={faAdd as IconLookup} />}
+            color={SettingsManager.userColor}
+        />
+    )
+
+    getDeleteButton = (type: string) => {
+        return (
+            <IconButton
+                tooltip={`Delete ${type === 'pin' ? 'Pin' : 'Route'}`} //
+                onPointerDown={this.Delete}
+                icon={<FontAwesomeIcon icon="trash-alt" />}
+                color={SettingsManager.userColor}
+            />
+        )
+    }
+
+    animateRouteButton: JSX.Element = (
+        <IconButton 
+            tooltip="Animate route" 
+            onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)} 
+            icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} 
+            color={SettingsManager.userColor} 
+        />
+    )
+
+    revertToOriginalMarkerButton = (
+        <IconButton
+            tooltip="Revert to original" //
+            onPointerDown={() => this.revertToOriginalMarker()}
+            icon={<FontAwesomeIcon icon={faArrowsRotate as IconLookup} />}
+            color={SettingsManager.userColor}
+        />
+    )
+
     render() {
         const buttons = (
             <div className="menu-buttons" style={{ display: 'flex' }}>
                 {this.menuType === 'standard' && (
                     <>
-                        <IconButton
-                            tooltip="Delete Pin" //
-                            onPointerDown={this.Delete}
-                            icon={<FontAwesomeIcon icon="trash-alt" />}
-                            color={SettingsManager.userColor}
-                        />
-                        <IconButton tooltip="Get directions" onPointerDown={this.DirectionsClick} /**TODO: fix */ icon={<FontAwesomeIcon icon={faDiamondTurnRight as IconLookup} />} color={SettingsManager.userColor} />
-                        <IconButton tooltip="Add to calendar" onPointerDown={this.Delete} /**TODO: fix */ icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} color={SettingsManager.userColor} />
-                        <div ref={this._commentRef}>
-                            <IconButton
-                                tooltip="Link Note to Pin" //
-                                onPointerDown={this.notePointerDown}
-                                icon={<FontAwesomeIcon icon="sticky-note" />}
-                                color={SettingsManager.userColor}
-                            />
-                        </div>
-                        <IconButton tooltip="Customize pin" onPointerDown={this.CustomizeClick} icon={<FontAwesomeIcon icon={faEdit as IconLookup} />} color={SettingsManager.userColor} />
-                        <IconButton
-                            tooltip="Center on pin" //
-                            onPointerDown={this.Center}
-                            icon={<FontAwesomeIcon icon="compress-arrows-alt" />}
-                            color={SettingsManager.userColor}
-                        />
+                        {this.getDeleteButton('pin')}
+                        {this.getDirectionsButton}
+                        {this.getAddToCalendarButton('pin')}
+                        {this.getLinkNoteToDocButton('pin')}
+                        {this.customizePinButton}
+                        {this.centerOnPinButton}
                     </>
                 )}
                 {this.menuType === 'routeCreation' && (
                     <>
-                        <IconButton
-                            tooltip="Go back" //
-                            onPointerDown={this.BackClick}
-                            icon={<FontAwesomeIcon icon={faArrowLeft as IconLookup} />}
-                            color={SettingsManager.userColor}
-                        />
-                        <IconButton
-                            tooltip="Add route" //
-                            onPointerDown={this.HandleAddRouteClick}
-                            icon={<FontAwesomeIcon icon={faAdd as IconLookup} />}
-                            color={SettingsManager.userColor}
-                        />
+                        {this.backButton}
+                        {this.addRouteButton}
                     </>
                 )}
                 {this.menuType === 'route' && (
                     <>
-                        <IconButton
-                            tooltip="Delete Route" //
-                            onPointerDown={this.Delete}
-                            icon={<FontAwesomeIcon icon="trash-alt" />}
-                            color={SettingsManager.userColor}
-                        />
-                        <IconButton tooltip="Animate route" onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)} /**TODO: fix */ icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} color={SettingsManager.userColor} />
-                        <div ref={this._commentRef}>
-                            <IconButton
-                                tooltip="Link Note to Pin" //
-                                onPointerDown={this.notePointerDown}
-                                icon={<FontAwesomeIcon icon="sticky-note" />}
-                                color={SettingsManager.userColor}
-                            />
-                        </div>
-                        <IconButton tooltip="Add to calendar" onPointerDown={this.Delete} /**TODO: fix */ icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} color={SettingsManager.userColor} />
+                        {this.getDeleteButton('route')}
+                        {this.animateRouteButton}
+                        {this.getAddToCalendarButton('route')}
+                        {this.getLinkNoteToDocButton('route')}
                     </>
                 )}
                 {this.menuType === 'customize' && (
                     <>
-                        <IconButton
-                            tooltip="Go back" //
-                            onPointerDown={this.BackClick}
-                            icon={<FontAwesomeIcon icon={faArrowLeft as IconLookup} />}
-                            color={SettingsManager.userColor}
-                        />
-                        <IconButton
-                            tooltip="Revert to original" //
-                            onPointerDown={() => this.revertToOriginalMarker()}
-                            icon={<FontAwesomeIcon icon={faArrowsRotate as IconLookup} />}
-                            color={SettingsManager.userColor}
-                        />
+                        {this.backButton}
+                        {this.revertToOriginalMarkerButton}
                     </>
                 )}
 
@@ -373,12 +461,6 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                     )} */}
             </div>
         );
-        // return (
-        //     <div ref={MapAnchorMenu.top} style={{zIndex: 30000, width: '100%', height: '100px'}}>
-        //         HELLO THIS IS ANCHOR MENU
-        //         {this.getElement(buttons)}
-        //     </div>
-        // )
 
         return this.getElement(
             <div ref={MapAnchorMenu.top} className="map-anchor-menu-container">
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index b3ce55786..25b4587a5 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -109,20 +109,15 @@
             display: flex;
             justify-content: flex-start;
             align-items: center;
-            gap: 7px;
+            width: 100%;
 
             .animation-suboptions {
                 display: flex;
                 justify-content: flex-start;
-                flex-wrap: wrap;
                 align-items: center;
                 gap: 7px;
                 width: 100%;
 
-                .first-person-label {
-                    width: '130px' !important;
-                }
-
                 label {
                     margin-bottom: 0;
                 }
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 44afb8e7b..562cb63d1 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -650,6 +650,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     @action
     deleteSelectedPinOrRoute = undoable(() => {
+        console.log('deleting')
         if (this.selectedPinOrRoute) {
             // Removes filter
             Doc.setDocFilter(this.Document, 'latitude', this.selectedPinOrRoute.latitude, 'remove');
@@ -672,9 +673,19 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         e.stopPropagation();
         e.preventDefault();
         MapAnchorMenu.Instance.fadeOut(true);
+        runInAction(() => {
+            this.temporaryRouteSource = {
+                type: 'FeatureCollection',
+                features: [],
+            }
+        })
+
+
         document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
     };
 
+   
+
     @action
     centerOnSelectedPin = () => {
         if (this.selectedPinOrRoute) {
@@ -869,6 +880,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             if (createPinForDestination) {
                 this.createPushpin(destination.center[1], destination.center[0], destination.place_name);
             }
+            this.temporaryRouteSource = {
+                type: 'FeatureCollection',
+                features: []
+            }
+            MapAnchorMenu.Instance.fadeOut(true);
             return mapRoute;
         }
         // TODO: Display error that can't create route to same location
@@ -931,6 +947,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @action
     handleMapClick = (e: MapLayerMouseEvent) => {
         this.featuresFromGeocodeResults = [];
+        this.settingsOpen = false;
         if (this._mapRef.current) {
             const features = this._mapRef.current.queryRenderedFeatures(e.point, {
                 layers: ['map-routes-layer'],
@@ -953,13 +970,14 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     MapAnchorMenu.Instance.OnClick = this.createNoteAnnotation;
                     MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag;
 
+                    MapAnchorMenu.Instance.Reset();
+
                     MapAnchorMenu.Instance.setRouteDoc(routeDoc);
 
                     // TODO: Subject to change
                     MapAnchorMenu.Instance.setAllMapboxPins(this.allAnnotations.filter(anno => !anno.layout_unrendered));
 
                     MapAnchorMenu.Instance.DisplayRoute = this.displayRoute;
-                    MapAnchorMenu.Instance.HideRoute = this.hideRoute;
                     MapAnchorMenu.Instance.AddNewRouteToMap = this.createMapRoute;
                     MapAnchorMenu.Instance.CreatePin = this.addMarkerForFeature;
                     MapAnchorMenu.Instance.OpenAnimationPanel = this.openAnimationPanel;
@@ -976,6 +994,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
     };
 
+
+
     /**
      * Makes a reverse geocoding API call to retrieve features corresponding to a map click (based on longitude
      * and latitude). Sets the search results accordingly.
@@ -1031,12 +1051,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         MapAnchorMenu.Instance.OnClick = this.createNoteAnnotation;
         MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag;
 
+        MapAnchorMenu.Instance.Reset();
+
         // pass in the pinDoc
         MapAnchorMenu.Instance.setPinDoc(pinDoc);
         MapAnchorMenu.Instance.setAllMapboxPins(this.allAnnotations.filter(anno => !anno.layout_unrendered));
 
         MapAnchorMenu.Instance.DisplayRoute = this.displayRoute;
-        MapAnchorMenu.Instance.HideRoute = this.hideRoute;
         MapAnchorMenu.Instance.AddNewRouteToMap = this.createMapRoute;
         MapAnchorMenu.Instance.CreatePin = this.addMarkerForFeature;
 
@@ -1367,8 +1388,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
     };
 
-    @action
-    exportAnimationToVideo = () => {};
 
     getRouteAnimationOptions = (): JSX.Element => {
         return (
@@ -1406,7 +1425,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         <div>|</div>
                         <FormControlLabel
                             className="first-person-label"
-                            style={{ width: '130px' }}
                             label="1st person animation:"
                             labelPlacement="start"
                             control={<Checkbox color="success" checked={this.isStreetViewAnimation} onChange={this.toggleIsStreetViewAnimation} />}
@@ -1414,8 +1432,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         <div id="divider">|</div>
                         <IconButton tooltip={this.animationSpeedTooltipText} onPointerDown={this.updateAnimationSpeed} icon={this.animationSpeedIcon} size={Size.MEDIUM} />
                         <div id="divider">|</div>
-                        <div style={{ width: '230px' }}>Select Line Color: </div>
-                        <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={color => this.setAnimationLineColor(color)} />
+                        <div style={{display: 'flex', alignItems: 'center'}}>
+                            <div>Select Line Color: </div>
+                            <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={color => this.setAnimationLineColor(color)} />
+                        </div>
+                        
                     </div>
                 </>
             </>
@@ -1449,7 +1470,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     @action
     changeMapStyle = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        this.dataDoc.map_style = `mapbox://styles/mapbox/${e.target.value}`;
+        this.dataDoc.map_style = e.target.value;
         // this.mapStyle = `mapbox://styles/mapbox/${e.target.value}`
     };
 
@@ -1457,6 +1478,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     onBearingChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const bearing = parseInt(e.target.value);
         if (!isNaN(bearing) && this._mapRef.current) {
+            console.log('bearing change')
             const fixedBearing = Math.max(0, Math.min(360, bearing));
             this._mapRef.current.setBearing(fixedBearing);
             this.dataDoc.map_bearing = fixedBearing;
@@ -1467,6 +1489,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     onPitchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const pitch = parseInt(e.target.value);
         if (!isNaN(pitch) && this._mapRef.current) {
+            console.log('pitch change')
             const fixedPitch = Math.max(0, Math.min(85, pitch));
             this._mapRef.current.setPitch(fixedPitch);
             this.dataDoc.map_pitch = fixedPitch;
@@ -1564,29 +1587,29 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             <div className="mapbox-style-select">
                                 <div>Map Style:</div>
                                 <div>
-                                    <select onChange={this.changeMapStyle}>
-                                        <option value="streets-v11">Streets</option>
-                                        <option value="outdoors-v12">Outdoors</option>
-                                        <option value="light-v11">Light</option>
-                                        <option value="dark-v11">Dark</option>
-                                        <option value="satellite-v9">Satellite</option>
-                                        <option value="satellite-streets-v12">Satellite Streets</option>
-                                        <option value="navigation-day-v1">Navigation Day</option>
-                                        <option value="navigation-night-v1">Navigation Night</option>
+                                    <select onChange={this.changeMapStyle} value={StrCast(this.dataDoc.map_style)}>
+                                        <option value="mapbox://styles/mapbox/streets-v11">Streets</option>
+                                        <option value="mapbox://styles/mapbox/outdoors-v12">Outdoors</option>
+                                        <option value="mapbox://styles/mapbox/light-v11">Light</option>
+                                        <option value="mapbox://styles/mapbox/dark-v11">Dark</option>
+                                        <option value="mapbox://styles/mapbox/satellite-v9">Satellite</option>
+                                        <option value="mapbox://styles/mapbox/satellite-streets-v12">Satellite Streets</option>
+                                        <option value="mapbox://styles/mapbox/navigation-day-v1">Navigation Day</option>
+                                        <option value="mapbox://styles/mapbox/navigation-night-v1">Navigation Night</option>
                                     </select>
                                 </div>
                             </div>
                             <div className="mapbox-bearing-selection">
                                 <div>Bearing: </div>
-                                <input value={NumCast(this.mapboxMapViewState.bearing).toFixed(2)} type="number" onChange={this.onBearingChange} />
+                                <input value={NumCast(this.mapboxMapViewState.bearing).toFixed(0)} type="number" onChange={this.onBearingChange} />
                             </div>
                             <div className="mapbox-pitch-selection">
                                 <div>Pitch: </div>
-                                <input value={NumCast(this.mapboxMapViewState.pitch).toFixed(2)} type="number" onChange={this.onPitchChange} />
+                                <input value={NumCast(this.mapboxMapViewState.pitch).toFixed(0)} type="number" onChange={this.onPitchChange} />
                             </div>
                             <div className="mapbox-pitch-selection">
                                 <div>Zoom: </div>
-                                <input value={NumCast(this.mapboxMapViewState.zoom).toFixed(2)} type="number" onChange={this.onZoomChange} />
+                                <input value={NumCast(this.mapboxMapViewState.zoom).toFixed(0)} type="number" onChange={this.onZoomChange} />
                             </div>
                             <div className="mapbox-terrain-selection">
                                 <div>Show terrain: </div>
@@ -1620,26 +1643,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             </React.Fragment>
                         </div>
                     )}
-                    {/* <div className='zoom-box'>
-                        <IconButton // increment 
-                            style={{borderBottom: '1px', borderBottomColor: 'white'}}
-                            onPointerDown={() => this.onStepZoomChange(true)}
-                            icon={<FontAwesomeIcon icon={faPlus as IconLookup} color='black'/>}
-                            size={Size.SMALL}
-                            color={SettingsManager.userColor}
-                        />
-                        <IconButton  // decrement
-                            onPointerDown={() => this.onStepZoomChange(false)}
-                            icon={<FontAwesomeIcon icon={faMinus as IconLookup} color='black'/>}
-                            size={Size.SMALL}
-                            color={SettingsManager.userColor}
-                        />
-                    </div>            */}
                     <MapProvider>
                         <MapboxMap
                             ref={this._mapRef}
                             mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
-                            viewState={this.isAnimating ? undefined : { ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width), height: NumCast(this.layoutDoc._height) }}
+                            viewState={(this.isAnimating || this.routeToAnimate) ? undefined : { ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width), height: NumCast(this.layoutDoc._height) }}
                             mapStyle={this.dataDoc.map_style ? StrCast(this.dataDoc.map_style) : 'mapbox://styles/mapbox/streets-v11'}
                             style={{
                                 position: 'absolute',
@@ -1738,59 +1746,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             ))} */}
                         </MapboxMap>
                     </MapProvider>
-
-                    {/* <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, i) => (
-                                      <DocumentView
-                                          key={i}
-                                          {...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}
-                                /> */}
                 </div>
-                {/* </LoadScript > */}
                 <div className="mapBox-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
                     <SidebarAnnos
                         ref={this._sidebarRef}
@@ -1814,54 +1770,3 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         );
     }
 }
-
-{
-    /* <Autocomplete
-                            fullWidth
-                            id="map-location-searcher"
-                            freeSolo
-                            onInputChange={(e, searchText) => this.handleSearchChange(searchText)}
-                            onChange={(e, selectedOption) => {
-                                this.handleSearchChange(""); // clear input 
-                                this.addMarkerForFeature(selectedOption);
-                            }}
-                            options={this.featuresFromGeocodeResults
-                                .filter(feature => feature.place_name)
-                                .map(feature => feature)}
-                            getOptionLabel={(feature) => feature.place_name}
-                            renderInput={(params) => (
-                                <TextField
-                                    {...params}
-                                    placeholder='Enter a location'
-                                />
-                            )}
-                            /> */
-}
-{
-    /* <EditableText
-                            // editing
-                            setVal={(newText: string | number) => typeof newText === 'string' && this.handleSearchChange(newText)}
-                            // onEnter={e => this.bingSearch()}
-                            onEnter={e => {}}
-                            height={32}
-                            // placeholder={this.bingSearchBarContents || 'Enter a location'}
-                            placeholder='Enter a location'
-                            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> */
-}
\ No newline at end of file