Merge branch 'master' of https://github.com/brown-dash/Dash-Web

5 files changed, 214 insertions, 76 deletions

diff --git a/package-lock.json b/package-lock.json
index 72716d710..3b11eda7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -94,6 +94,7 @@
                 "cookie-parser": "^1.4.6",
                 "cookie-session": "^2.0.0",
                 "copy-webpack-plugin": "^13.0.0",
+                "copyfiles": "^2.4.1",
                 "core-js": "^3.33.3",
                 "cors": "^2.8.5",
                 "css-loader": "^7.1.2",
@@ -18814,6 +18815,68 @@
                 "webpack": "^5.1.0"
             }
         },
+        "node_modules/copyfiles": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/copyfiles/-/copyfiles-2.4.1.tgz",
+            "integrity": "sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg==",
+            "license": "MIT",
+            "dependencies": {
+                "glob": "^7.0.5",
+                "minimatch": "^3.0.3",
+                "mkdirp": "^1.0.4",
+                "noms": "0.0.0",
+                "through2": "^2.0.1",
+                "untildify": "^4.0.0",
+                "yargs": "^16.1.0"
+            },
+            "bin": {
+                "copyfiles": "copyfiles",
+                "copyup": "copyfiles"
+            }
+        },
+        "node_modules/copyfiles/node_modules/brace-expansion": {
+            "version": "1.1.11",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/copyfiles/node_modules/glob": {
+            "version": "7.2.3",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+            "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+            "deprecated": "Glob versions prior to v9 are no longer supported",
+            "license": "ISC",
+            "dependencies": {
+                "fs.realpath": "^1.0.0",
+                "inflight": "^1.0.4",
+                "inherits": "2",
+                "minimatch": "^3.1.1",
+                "once": "^1.3.0",
+                "path-is-absolute": "^1.0.0"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/copyfiles/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/core-js": {
             "version": "3.41.0",
             "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.41.0.tgz",
@@ -27875,7 +27938,6 @@
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
             "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-            "dev": true,
             "license": "MIT",
             "bin": {
                 "mkdirp": "bin/cmd.js"
@@ -28739,6 +28801,40 @@
                 "node": ">=4"
             }
         },
+        "node_modules/noms": {
+            "version": "0.0.0",
+            "resolved": "https://registry.npmjs.org/noms/-/noms-0.0.0.tgz",
+            "integrity": "sha512-lNDU9VJaOPxUmXcLb+HQFeUgQQPtMI24Gt6hgfuMHRJgMRHMF/qZ4HJD3GDru4sSw9IQl2jPjAYnQrdIeLbwow==",
+            "license": "ISC",
+            "dependencies": {
+                "inherits": "^2.0.1",
+                "readable-stream": "~1.0.31"
+            }
+        },
+        "node_modules/noms/node_modules/isarray": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+            "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+            "license": "MIT"
+        },
+        "node_modules/noms/node_modules/readable-stream": {
+            "version": "1.0.34",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+            "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==",
+            "license": "MIT",
+            "dependencies": {
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.1",
+                "isarray": "0.0.1",
+                "string_decoder": "~0.10.x"
+            }
+        },
+        "node_modules/noms/node_modules/string_decoder": {
+            "version": "0.10.31",
+            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+            "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
+            "license": "MIT"
+        },
         "node_modules/normalize-path": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -37339,6 +37435,52 @@
                 "tslib": "^2"
             }
         },
+        "node_modules/through2": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+            "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+            "license": "MIT",
+            "dependencies": {
+                "readable-stream": "~2.3.6",
+                "xtend": "~4.0.1"
+            }
+        },
+        "node_modules/through2/node_modules/isarray": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+            "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+            "license": "MIT"
+        },
+        "node_modules/through2/node_modules/readable-stream": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+            "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+            "license": "MIT",
+            "dependencies": {
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.3",
+                "isarray": "~1.0.0",
+                "process-nextick-args": "~2.0.0",
+                "safe-buffer": "~5.1.1",
+                "string_decoder": "~1.1.1",
+                "util-deprecate": "~1.0.1"
+            }
+        },
+        "node_modules/through2/node_modules/safe-buffer": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+            "license": "MIT"
+        },
+        "node_modules/through2/node_modules/string_decoder": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+            "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+            "license": "MIT",
+            "dependencies": {
+                "safe-buffer": "~5.1.0"
+            }
+        },
         "node_modules/thunky": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -38806,6 +38948,15 @@
                 }
             }
         },
+        "node_modules/untildify": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
+            "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/update-browserslist-db": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -40231,7 +40382,6 @@
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
             "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.4"
diff --git a/package.json b/package.json
index 8be8767fd..3f4b3df8b 100644
--- a/package.json
+++ b/package.json
@@ -18,10 +18,10 @@
         "child_process": "empty"
     },
     "scripts": {
-        "start-release": "cp node_modules/pdfjs-dist/build/pdf.worker.* src/server/public/files; cross-env RELEASE=true USE_AZURE=false NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug -- src/server/index.ts",
-        "start-release-debug": "cp node_modules/pdfjs-dist/build/pdf.worker.* src/server/public/files; cross-env RELEASE=true USE_AZURE=false NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --inspect -- src/server/index.ts",
-        "start": "cp node_modules/pdfjs-dist/build/pdf.worker.* src/server/public/files; cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug --transpile-only -- src/server/index.ts",
-        "debug": "cp node_modules/pdfjs-dist/build/pdf.worker.* src/server/public/files; cross-env  NODE_OPTIONS=--max_old_space_size=8192 ts-node-dev --transpile-only --inspect -- src/server/index.ts",
+        "start-release": "copyfiles node_modules/pdfjs-dist/build/pdf.worker.* src/server/public/files && cross-env RELEASE=true USE_AZURE=false NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug -- src/server/index.ts",
+        "start-release-debug": "copyfiles node_modules/pdfjs-dist/build/pdf.worker.* src/server/public/files && cross-env RELEASE=true USE_AZURE=false NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --inspect -- src/server/index.ts",
+        "start": "copyfiles node_modules/pdfjs-dist/build/pdf.worker.* src/server/public/files && cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug --transpile-only -- src/server/index.ts",
+        "debug": "copyfiles node_modules/pdfjs-dist/build/pdf.worker.* src/server/public/files && cross-env  NODE_OPTIONS=--max_old_space_size=8192 ts-node-dev --transpile-only --inspect -- src/server/index.ts",
         "monitor": "cross-env MONITORED=true NODE_OPTIONS=--max_old_space_size=4096 ts-node src/server/index.ts",
         "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 webpack --env production",
         "test": "mocha -r ts-node/register test/**/*.ts",
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 6bbd43b1b..392d85af3 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -404,7 +404,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         const { translateX, translateY, scale } = ClientUtils.GetScreenTransform(dref?.ContentDiv);
         return new Transform(-translateX + (dref?.centeringX || 0) * scale, 
                              -translateY + (dref?.centeringY || 0) * scale, 1)
-                  .scale(1 / scale); // prettier-ignore
+                  .scale(1 / (scale||1)); // prettier-ignore
     });
     getDocWidth = computedFn((d?: Doc) => () => {
         if (!d) return 0;
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index fdd8a29d7..bd4b51038 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -7,6 +7,9 @@
     overflow: hidden;
     display: flex;
     position: absolute;
+    .mapboxgl-marker {
+        cursor: default;
+    }
 
     .mapboxgl-map {
         overflow: unset !important;
@@ -27,6 +30,9 @@
         gap: 5px;
         align-items: center;
         width: calc(100% - 40px);
+        z-index: 1;
+        position: relative;
+        background: lightGray;
     }
 
     .mapbox-settings-panel {
@@ -171,6 +177,8 @@
 
     .mapBox-wrapper {
         width: 100%;
+        transform-origin: top left;
+
         .mapBox-input {
             box-sizing: border-box;
             border: 1px solid transparent;
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index d642784c0..65d78f754 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1,8 +1,8 @@
-import { IconLookup, faCircleXmark, faGear, faPause, faPlay, faRotate } from '@fortawesome/free-solid-svg-icons';
+import { IconButton, Size, Type } from '@dash/components';
+import { faCircleXmark, faGear, faPause, faPlay, faRotate } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Checkbox, FormControlLabel, TextField } from '@mui/material';
 import * as turf from '@turf/turf';
-import { IconButton, Size, Type } from '@dash/components';
 import * as d3 from 'd3';
 import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString } from 'geojson';
 import { LngLatBoundsLike, LngLatLike, MapLayerMouseEvent } from 'mapbox-gl';
@@ -14,7 +14,10 @@ import { Layer, MapProvider, MapRef, Map as MapboxMap, Marker, Source, ViewState
 import { ClientUtils, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { Doc, DocListCast, Field, LinkedTo, Opt, StrListCast } from '../../../../fields/Doc';
+import { List } from '../../../../fields/List';
+import { RichTextField } from '../../../../fields/RichTextField';
 import { DocCast, NumCast, StrCast, toList } from '../../../../fields/Types';
+import { TraceMobx } from '../../../../fields/util';
 import { DocUtils } from '../../../documents/DocUtils';
 import { DocumentType } from '../../../documents/DocumentTypes';
 import { Docs } from '../../../documents/Documents';
@@ -34,8 +37,6 @@ import { MapAnchorMenu } from './MapAnchorMenu';
 import './MapBox.scss';
 import { MapboxApiUtility, TransportationType } from './MapboxApiUtility';
 import { MarkerIcons } from './MarkerIcons';
-import { RichTextField } from '../../../../fields/RichTextField';
-import { List } from '../../../../fields/List';
 // import { GeocoderControl } from './GeocoderControl';
 
 // amongus
@@ -657,9 +658,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     MapAnchorMenu.Instance.Center = this.centerOnSelectedPin;
                     MapAnchorMenu.Instance.OnClick = this.createNoteAnnotation;
                     MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag;
-
                     MapAnchorMenu.Instance.Reset();
-
                     MapAnchorMenu.Instance.setRouteDoc(routeDoc);
 
                     // TODO: Subject to change
@@ -822,10 +821,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @computed
     get preAnimationViewState() {
-        if (!this._isAnimating) {
-            return this.mapboxMapViewState;
-        }
-        return undefined;
+        return !this._isAnimating ? this.mapboxMapViewState : undefined;
     }
 
     @action
@@ -835,24 +831,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action
     updateAnimationSpeed = () => {
-        let newAnimationSpeed: AnimationSpeed;
+        this._animationSpeed = (() => {
         switch (this._animationSpeed) {
-            case AnimationSpeed.SLOW:
-                newAnimationSpeed = AnimationSpeed.MEDIUM;
-                break;
-            case AnimationSpeed.MEDIUM:
-                newAnimationSpeed = AnimationSpeed.FAST;
-                break;
-            case AnimationSpeed.FAST:
-                newAnimationSpeed = AnimationSpeed.SLOW;
-                break;
-            default:
-                newAnimationSpeed = AnimationSpeed.MEDIUM;
-                break;
-        }
-        this._animationSpeed = newAnimationSpeed;
+            case AnimationSpeed.SLOW:   return AnimationSpeed.MEDIUM;
+            case AnimationSpeed.MEDIUM: return AnimationSpeed.FAST;
+            case AnimationSpeed.FAST:   return AnimationSpeed.SLOW;
+            default:                    return AnimationSpeed.MEDIUM;
+        }})(); // prettier-ignore
         if (this._animationUtility) {
-            this._animationUtility.updateAnimationSpeed(newAnimationSpeed);
+            this._animationUtility.updateAnimationSpeed(this._animationSpeed);
         }
     };
     @computed get animationSpeedTooltipText(): string {
@@ -879,19 +866,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._animationUtility?.updateIsStreetViewAnimation(newVal);
     };
 
-    getFeatureFromRouteDoc = (routeDoc: Doc): Feature<Geometry, GeoJsonProperties> => {
-        const geometry: LineString = {
+    getFeatureFromRouteDoc = (routeDoc: Doc): Feature<Geometry, GeoJsonProperties> => ({
+        type: 'Feature',
+        properties: {
+            routeTitle: routeDoc.title,
+        },
+        geometry: {
             type: 'LineString',
             coordinates: JSON.parse(StrCast(routeDoc.routeCoordinates)),
-        };
-        return {
-            type: 'Feature',
-            properties: {
-                routeTitle: routeDoc.title,
-            },
-            geometry: geometry,
-        };
-    };
+        },
+    });
 
     @action
     playAnimation = (status: AnimationStatus) => {
@@ -1014,7 +998,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         this.playAnimation(AnimationStatus.START); // Play from the beginning
                     }
                 }}
-                icon={this._isAnimating && this._finishedFlyTo ? <FontAwesomeIcon icon={faPause as IconLookup} /> : <FontAwesomeIcon icon={faPlay as IconLookup} />}
+                icon={<FontAwesomeIcon icon={this._isAnimating && this._finishedFlyTo ? faPause : faPlay} />}
                 color="black"
                 size={Size.MEDIUM}
             />
@@ -1025,12 +1009,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         this.stopAnimation(false);
                         this.playAnimation(AnimationStatus.START);
                     }}
-                    icon={<FontAwesomeIcon icon={faRotate as IconLookup} />}
+                    icon={<FontAwesomeIcon icon={faRotate} />}
                     color="black"
                     size={Size.MEDIUM}
                 />
             )}
-            <IconButton style={{ marginRight: '10px' }} tooltip="Stop and close animation" onPointerDown={() => this.stopAnimation(true)} icon={<FontAwesomeIcon icon={faCircleXmark as IconLookup} />} color="black" size={Size.MEDIUM} />
+            <IconButton style={{ marginRight: '10px' }} tooltip="Stop and close animation" onPointerDown={() => this.stopAnimation(true)} icon={<FontAwesomeIcon icon={faCircleXmark} />} color="black" size={Size.MEDIUM} />
             <div className="animation-suboptions">
                 <div>|</div>
                 <FormControlLabel className="first-person-label" label="1st person animation:" labelPlacement="start" control={<Checkbox color="success" checked={this._isStreetViewAnimation} onChange={this.toggleIsStreetViewAnimation} />} />
@@ -1125,16 +1109,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._showTerrain = !this._showTerrain;
     };
 
-    getMarkerIcon = (pinDoc: Doc): JSX.Element | null => {
-        const markerType = StrCast(pinDoc.markerType);
-        const markerColor = StrCast(pinDoc.markerColor);
-
-        return MarkerIcons.getFontAwesomeIcon(markerType, '2x', markerColor) ?? null;
-    };
+    getMarkerIcon = (pinDoc: Doc) => MarkerIcons.getFontAwesomeIcon(StrCast(pinDoc.markerType), '2x', StrCast(pinDoc.markerColor)) ?? null;
 
     render() {
-        const scale = this._props.NativeDimScaling?.() || 1;
-        const parscale = scale === 1 ? 1 : (this.ScreenToLocalBoxXf().Scale ?? 1);
+        TraceMobx();
+        const scale = (this._props.NativeDimScaling?.() || 1) + 0.001; // bcz: weird, but without this hack, MapBox doesn't locate map correctly
+        const parscale = this.ScreenToLocalBoxXf().Scale;
 
         return (
             <div className="mapBox" ref={this._ref}>
@@ -1142,13 +1122,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     className="mapBox-wrapper"
                     onWheel={e => e.stopPropagation()}
                     onPointerDown={e => e.button === 0 && !e.ctrlKey && e.stopPropagation()}
-                    style={{ transformOrigin: 'top left', transform: `scale(${scale})`, width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
+                    style={{ transform: `scale(${scale})`, width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
                     {!this._routeToAnimate && (
-                        <div className="mapBox-searchbar" style={{ width: `${100 / scale}%`, zIndex: 1, position: 'relative', background: 'lightGray' }}>
+                        <div className="mapBox-searchbar" style={{ width: `${100 / scale}%` }}>
                             <TextField fullWidth placeholder="Enter a location" onKeyDown={this.searchbarKeyDown} onChange={e => this.handleSearchChange(e.target.value)} />
-                            <IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={() => this.toggleSettings()} />
+                            <IconButton icon={<FontAwesomeIcon icon={faGear} size="1x" />} type={Type.TERT} onClick={this.toggleSettings} />
                             <div style={{ opacity: 0 }}>
-                                <IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={() => this.toggleSettings()} />
+                                <IconButton icon={<FontAwesomeIcon icon={faGear} size="1x" />} type={Type.TERT} onClick={this.toggleSettings} />
                             </div>
                         </div>
                     )}
@@ -1172,15 +1152,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             </div>
                             <div className="mapbox-bearing-selection">
                                 <div>Bearing: </div>
-                                <input value={NumCast(this.mapboxMapViewState.bearing).toFixed(0)} type="number" onChange={this.onBearingChange} />
+                                <input value={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(0)} type="number" onChange={this.onPitchChange} />
+                                <input value={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(0)} type="number" onChange={this.onZoomChange} />
+                                <input value={this.mapboxMapViewState.zoom.toFixed(0)} type="number" onChange={this.onZoomChange} />
                             </div>
                             <div className="mapbox-terrain-selection">
                                 <div>Show terrain: </div>
@@ -1214,9 +1194,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     )}
                     <MapProvider>
                         <MapboxMap
+                            key={'' + this.Document.x + this.Document.y} // force map to rerender after dragging, otherwise it will display the wrong location until it gets re-rendered
                             ref={this._mapRef}
                             mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
-                            viewState={this._isAnimating || this._routeToAnimate ? undefined : { ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width), height: NumCast(this.layoutDoc._height) }}
+                            viewState={this._isAnimating || this._routeToAnimate ? undefined : { ...this.mapboxMapViewState, width: this._props.PanelWidth(), height: this._props.PanelHeight() }}
                             mapStyle={this.dataDoc.map_style ? StrCast(this.dataDoc.map_style) : 'mapbox://styles/mapbox/streets-v11'}
                             style={{
                                 position: 'absolute',
@@ -1299,19 +1280,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                                     />
                                 </>
                             )}
-
-                            {!this._isAnimating &&
-                                this._animationPhase === 0 &&
-                                this.allPushpins // .filter(anno => !anno.layout_unrendered)
-                                    .map((pushpin, idx) => (
-                                        <Marker key={idx} longitude={NumCast(pushpin.longitude)} latitude={NumCast(pushpin.latitude)} anchor="bottom" onClick={e => this.handleMarkerClick(e.originalEvent.clientX, e.originalEvent.clientY, pushpin)}>
-                                            {this.getMarkerIcon(pushpin)}
-                                        </Marker>
-                                    ))}
-
-                            {/* {this.mapMarkers.length > 0 && this.mapMarkers.map((marker, idx) => (
-                                <Marker key={idx} longitude={marker.longitude} latitude={marker.latitude}/>
-                            ))} */}
+                            {this._isAnimating || this._animationPhase
+                                ? null
+                                : this.allPushpins.map(p => (
+                                      <Marker
+                                          key={'' + p.longitude + p.latitude}
+                                          longitude={NumCast(p.longitude)}
+                                          latitude={NumCast(p.latitude)}
+                                          anchor="bottom"
+                                          onClick={e => this.handleMarkerClick(e.originalEvent.clientX, e.originalEvent.clientY, p)}>
+                                          {this.getMarkerIcon(p)}
+                                      </Marker>
+                                  ))}
                         </MapboxMap>
                     </MapProvider>
                 </div>