From 3a22a2a2c78bd7d5af2b68541564a429be2864b9 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 15 Dec 2023 13:34:18 -0500
Subject: map box merging

---
 package-lock.json                                 | 757 ++++++++++++++++-
 package.json                                      |   1 +
 src/client/views/nodes/MapBox/AnimationUtility.ts |  16 +-
 src/client/views/nodes/MapBox/MapBox.tsx          | 962 +++++++++-------------
 4 files changed, 1178 insertions(+), 558 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cf308c977..04b0a9b81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
                 "@fortawesome/free-regular-svg-icons": "^6.5.1",
                 "@fortawesome/free-solid-svg-icons": "^6.5.1",
                 "@fortawesome/react-fontawesome": "^0.2.0",
+                "@mapbox/mapbox-gl-geocoder": "^5.0.2",
                 "@mui/icons-material": "^5.14.19",
                 "@mui/material": "^5.14.19",
                 "@octokit/core": "^5.0.2",
@@ -3129,6 +3130,23 @@
             "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
             "dev": true
         },
+        "node_modules/@mapbox/fusspot": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/fusspot/-/fusspot-0.4.0.tgz",
+            "integrity": "sha512-6sys1vUlhNCqMvJOqPEPSi0jc9tg7aJ//oG1A16H3PXoIt9whtNngD7UzBHUVTH15zunR/vRvMtGNVsogm1KzA==",
+            "dependencies": {
+                "is-plain-obj": "^1.1.0",
+                "xtend": "^4.0.1"
+            }
+        },
+        "node_modules/@mapbox/fusspot/node_modules/is-plain-obj": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+            "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/@mapbox/geojson-rewind": {
             "version": "0.5.2",
             "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
@@ -3160,11 +3178,207 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/@mapbox/mapbox-gl-geocoder": {
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-geocoder/-/mapbox-gl-geocoder-5.0.2.tgz",
+            "integrity": "sha512-o+2atyKKsfbiI2/iutQ/razt5O++kfi9oxwaXSfKc6m/9NudJnQm3rpGB0GagA+becq2NU4U99E9Yzv+UcMCBQ==",
+            "dependencies": {
+                "@mapbox/mapbox-sdk": "^0.13.7",
+                "events": "^3.3.0",
+                "lodash.debounce": "^4.0.6",
+                "nanoid": "^3.1.31",
+                "subtag": "^0.5.0",
+                "suggestions": "^1.6.0",
+                "xtend": "^4.0.1"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/@mapbox/mapbox-gl-supported": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
             "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ=="
         },
+        "node_modules/@mapbox/mapbox-sdk": {
+            "version": "0.13.7",
+            "resolved": "https://registry.npmjs.org/@mapbox/mapbox-sdk/-/mapbox-sdk-0.13.7.tgz",
+            "integrity": "sha512-JZjBsAVSBv7lX7gQPOQwftBGHIUcvL/tPKFxAL+SCT7u1n+eRH052XebOTkl28pNm7Du6DpKAs1GvgUnDcFFDQ==",
+            "dependencies": {
+                "@mapbox/fusspot": "^0.4.0",
+                "@mapbox/parse-mapbox-token": "^0.2.0",
+                "@mapbox/polyline": "^1.0.0",
+                "eventemitter3": "^3.1.0",
+                "form-data": "^3.0.0",
+                "got": "^11.8.5",
+                "is-plain-obj": "^1.1.0",
+                "xtend": "^4.0.1"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@mapbox/mapbox-sdk/node_modules/@sindresorhus/is": {
+            "version": "4.6.0",
+            "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
+            "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sindresorhus/is?sponsor=1"
+            }
+        },
+        "node_modules/@mapbox/mapbox-sdk/node_modules/@szmarczak/http-timer": {
+            "version": "4.0.6",
+            "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
+            "integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==",
+            "dependencies": {
+                "defer-to-connect": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@mapbox/mapbox-sdk/node_modules/cacheable-lookup": {
+            "version": "5.0.4",
+            "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
+            "integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==",
+            "engines": {
+                "node": ">=10.6.0"
+            }
+        },
+        "node_modules/@mapbox/mapbox-sdk/node_modules/cacheable-request": {
+            "version": "7.0.4",
+            "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.4.tgz",
+            "integrity": "sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==",
+            "dependencies": {
+                "clone-response": "^1.0.2",
+                "get-stream": "^5.1.0",
+                "http-cache-semantics": "^4.0.0",
+                "keyv": "^4.0.0",
+                "lowercase-keys": "^2.0.0",
+                "normalize-url": "^6.0.1",
+                "responselike": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@mapbox/mapbox-sdk/node_modules/eventemitter3": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
+            "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q=="
+        },
+        "node_modules/@mapbox/mapbox-sdk/node_modules/form-data": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+            "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+            "dependencies": {
+                "asynckit": "^0.4.0",
+                "combined-stream": "^1.0.8",
+                "mime-types": "^2.1.12"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/@mapbox/mapbox-sdk/node_modules/get-stream": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+            "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+            "dependencies": {
+                "pump": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/@mapbox/mapbox-sdk/node_modules/got": {
+            "version": "11.8.6",
+            "resolved": "https://registry.npmjs.org/got/-/got-11.8.6.tgz",
+            "integrity": "sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==",
+            "dependencies": {
+                "@sindresorhus/is": "^4.0.0",
+                "@szmarczak/http-timer": "^4.0.5",
+                "@types/cacheable-request": "^6.0.1",
+                "@types/responselike": "^1.0.0",
+                "cacheable-lookup": "^5.0.3",
+                "cacheable-request": "^7.0.2",
+                "decompress-response": "^6.0.0",
+                "http2-wrapper": "^1.0.0-beta.5.2",
+                "lowercase-keys": "^2.0.0",
+                "p-cancelable": "^2.0.0",
+                "responselike": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10.19.0"
+            },
+            "funding": {
+                "url": "https://github.com/sindresorhus/got?sponsor=1"
+            }
+        },
+        "node_modules/@mapbox/mapbox-sdk/node_modules/http2-wrapper": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
+            "integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
+            "dependencies": {
+                "quick-lru": "^5.1.1",
+                "resolve-alpn": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=10.19.0"
+            }
+        },
+        "node_modules/@mapbox/mapbox-sdk/node_modules/is-plain-obj": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+            "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/@mapbox/mapbox-sdk/node_modules/lowercase-keys": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+            "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@mapbox/mapbox-sdk/node_modules/normalize-url": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+            "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/@mapbox/mapbox-sdk/node_modules/p-cancelable": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
+            "integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@mapbox/mapbox-sdk/node_modules/responselike": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
+            "integrity": "sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==",
+            "dependencies": {
+                "lowercase-keys": "^2.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/@mapbox/node-pre-gyp": {
             "version": "1.0.11",
             "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
@@ -3267,11 +3481,30 @@
             "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
             "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         },
+        "node_modules/@mapbox/parse-mapbox-token": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/parse-mapbox-token/-/parse-mapbox-token-0.2.0.tgz",
+            "integrity": "sha512-BjeuG4sodYaoTygwXIuAWlZV6zUv4ZriYAQhXikzx+7DChycMUQ9g85E79Htat+AsBg+nStFALehlOhClYm5cQ==",
+            "dependencies": {
+                "base-64": "^0.1.0"
+            }
+        },
         "node_modules/@mapbox/point-geometry": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
             "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
         },
+        "node_modules/@mapbox/polyline": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/polyline/-/polyline-1.2.1.tgz",
+            "integrity": "sha512-sn0V18O3OzW4RCcPoUIVDWvEGQaBNH9a0y5lgqrf5hUycyw1CzrhEoxV5irzrMNXKCkw1xRsZXcaVbsVZggHXA==",
+            "dependencies": {
+                "meow": "^9.0.0"
+            },
+            "bin": {
+                "polyline": "bin/polyline.bin.js"
+            }
+        },
         "node_modules/@mapbox/tiny-sdf": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
@@ -5521,6 +5754,17 @@
                 "@types/node": "*"
             }
         },
+        "node_modules/@types/cacheable-request": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
+            "integrity": "sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==",
+            "dependencies": {
+                "@types/http-cache-semantics": "*",
+                "@types/keyv": "^3.1.4",
+                "@types/node": "*",
+                "@types/responselike": "^1.0.0"
+            }
+        },
         "node_modules/@types/caseless": {
             "version": "0.12.5",
             "resolved": "https://registry.npmjs.org/@types/caseless/-/caseless-0.12.5.tgz",
@@ -6065,6 +6309,14 @@
             "integrity": "sha512-lZuNAY9xeJt7Bx4t4dx0rYCDqGPW8RXhQZK1td7d4H6E9zYbLoOtjBvfwdTKpsyxQI/2jv+armjX/RW+ZNpXOQ==",
             "dev": true
         },
+        "node_modules/@types/keyv": {
+            "version": "3.1.4",
+            "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
+            "integrity": "sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==",
+            "dependencies": {
+                "@types/node": "*"
+            }
+        },
         "node_modules/@types/libxmljs": {
             "version": "0.18.12",
             "resolved": "https://registry.npmjs.org/@types/libxmljs/-/libxmljs-0.18.12.tgz",
@@ -6108,6 +6360,11 @@
             "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==",
             "dev": true
         },
+        "node_modules/@types/minimist": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz",
+            "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag=="
+        },
         "node_modules/@types/mocha": {
             "version": "10.0.6",
             "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-10.0.6.tgz",
@@ -6154,6 +6411,11 @@
                 "@types/node": "*"
             }
         },
+        "node_modules/@types/normalize-package-data": {
+            "version": "2.4.4",
+            "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz",
+            "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA=="
+        },
         "node_modules/@types/oauth": {
             "version": "0.9.4",
             "resolved": "https://registry.npmjs.org/@types/oauth/-/oauth-0.9.4.tgz",
@@ -6390,6 +6652,14 @@
                 "node": ">= 0.12"
             }
         },
+        "node_modules/@types/responselike": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.3.tgz",
+            "integrity": "sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==",
+            "dependencies": {
+                "@types/node": "*"
+            }
+        },
         "node_modules/@types/retry": {
             "version": "0.12.0",
             "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -11046,6 +11316,38 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/camelcase-keys": {
+            "version": "6.2.2",
+            "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
+            "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
+            "dependencies": {
+                "camelcase": "^5.3.1",
+                "map-obj": "^4.0.0",
+                "quick-lru": "^4.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/camelcase-keys/node_modules/camelcase": {
+            "version": "5.3.1",
+            "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+            "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/camelcase-keys/node_modules/quick-lru": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
+            "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/camelize": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
@@ -11426,6 +11728,25 @@
                 "node": ">=6"
             }
         },
+        "node_modules/clone-response": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
+            "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
+            "dependencies": {
+                "mimic-response": "^1.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/clone-response/node_modules/mimic-response": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+            "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/clsx": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
@@ -12614,6 +12935,37 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/decamelize-keys": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.1.tgz",
+            "integrity": "sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==",
+            "dependencies": {
+                "decamelize": "^1.1.0",
+                "map-obj": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/decamelize-keys/node_modules/decamelize": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+            "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/decamelize-keys/node_modules/map-obj": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+            "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/decimal.js": {
             "version": "10.4.3",
             "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
@@ -13296,6 +13648,14 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/end-of-stream": {
+            "version": "1.4.4",
+            "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+            "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+            "dependencies": {
+                "once": "^1.4.0"
+            }
+        },
         "node_modules/engine.io": {
             "version": "6.5.4",
             "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.5.4.tgz",
@@ -16394,6 +16754,14 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/fuzzy": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmjs.org/fuzzy/-/fuzzy-0.1.3.tgz",
+            "integrity": "sha512-/gZffu4ykarLrCiP3Ygsa86UAo1E5vEVlvTrpkKywXSbP9Xhln3oSp9QSV57gEq3JFFpGJ4GZ+5zdEp3FcUh4w==",
+            "engines": {
+                "node": ">= 0.6.0"
+            }
+        },
         "node_modules/gauge": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
@@ -16922,6 +17290,14 @@
                 "node": ">=6"
             }
         },
+        "node_modules/hard-rejection": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
+            "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/has-bigints": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -17169,6 +17545,33 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/hosted-git-info": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+            "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+            "dependencies": {
+                "lru-cache": "^6.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/hosted-git-info/node_modules/lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dependencies": {
+                "yallist": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/hosted-git-info/node_modules/yallist": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        },
         "node_modules/howler": {
             "version": "2.2.4",
             "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.4.tgz",
@@ -17881,6 +18284,14 @@
                 "node": ">=0.8.19"
             }
         },
+        "node_modules/indent-string": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+            "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/inflight": {
             "version": "1.0.6",
             "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -19777,6 +20188,17 @@
             "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
             "dev": true
         },
+        "node_modules/map-obj": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
+            "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/mapbox-gl": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.0.1.tgz",
@@ -20171,6 +20593,50 @@
                 "node": ">= 0.10.0"
             }
         },
+        "node_modules/meow": {
+            "version": "9.0.0",
+            "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
+            "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
+            "dependencies": {
+                "@types/minimist": "^1.2.0",
+                "camelcase-keys": "^6.2.2",
+                "decamelize": "^1.2.0",
+                "decamelize-keys": "^1.1.0",
+                "hard-rejection": "^2.1.0",
+                "minimist-options": "4.1.0",
+                "normalize-package-data": "^3.0.0",
+                "read-pkg-up": "^7.0.1",
+                "redent": "^3.0.0",
+                "trim-newlines": "^3.0.0",
+                "type-fest": "^0.18.0",
+                "yargs-parser": "^20.2.3"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/meow/node_modules/decamelize": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+            "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/meow/node_modules/type-fest": {
+            "version": "0.18.1",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
+            "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/merge-descriptors": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -20806,6 +21272,14 @@
                 "dom-walk": "^0.1.0"
             }
         },
+        "node_modules/min-indent": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+            "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/minimalistic-assert": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -20833,6 +21307,35 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/minimist-options": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
+            "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
+            "dependencies": {
+                "arrify": "^1.0.1",
+                "is-plain-obj": "^1.1.0",
+                "kind-of": "^6.0.3"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/minimist-options/node_modules/arrify": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+            "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/minimist-options/node_modules/is-plain-obj": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+            "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/minipass": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
@@ -21395,7 +21898,6 @@
             "version": "3.3.3",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.3.tgz",
             "integrity": "sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==",
-            "dev": true,
             "bin": {
                 "nanoid": "bin/nanoid.cjs"
             },
@@ -21660,6 +22162,50 @@
                 "node": ">=6"
             }
         },
+        "node_modules/normalize-package-data": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+            "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+            "dependencies": {
+                "hosted-git-info": "^4.0.1",
+                "is-core-module": "^2.5.0",
+                "semver": "^7.3.4",
+                "validate-npm-package-license": "^3.0.1"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/normalize-package-data/node_modules/lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dependencies": {
+                "yallist": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/normalize-package-data/node_modules/semver": {
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+            "dependencies": {
+                "lru-cache": "^6.0.0"
+            },
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/normalize-package-data/node_modules/yallist": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        },
         "node_modules/normalize-path": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -25945,6 +26491,15 @@
             "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz",
             "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ=="
         },
+        "node_modules/pump": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+            "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+            "dependencies": {
+                "end-of-stream": "^1.1.0",
+                "once": "^1.3.1"
+            }
+        },
         "node_modules/punycode": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -26590,6 +27145,124 @@
                 "lodash": "^4.0.1"
             }
         },
+        "node_modules/read-pkg": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+            "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+            "dependencies": {
+                "@types/normalize-package-data": "^2.4.0",
+                "normalize-package-data": "^2.5.0",
+                "parse-json": "^5.0.0",
+                "type-fest": "^0.6.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/read-pkg-up": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+            "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+            "dependencies": {
+                "find-up": "^4.1.0",
+                "read-pkg": "^5.2.0",
+                "type-fest": "^0.8.1"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/read-pkg-up/node_modules/find-up": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+            "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+            "dependencies": {
+                "locate-path": "^5.0.0",
+                "path-exists": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/read-pkg-up/node_modules/locate-path": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+            "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+            "dependencies": {
+                "p-locate": "^4.1.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/read-pkg-up/node_modules/p-limit": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+            "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+            "dependencies": {
+                "p-try": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/read-pkg-up/node_modules/p-locate": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+            "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+            "dependencies": {
+                "p-limit": "^2.2.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/read-pkg-up/node_modules/type-fest": {
+            "version": "0.8.1",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+            "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/read-pkg/node_modules/hosted-git-info": {
+            "version": "2.8.9",
+            "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+            "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
+        },
+        "node_modules/read-pkg/node_modules/normalize-package-data": {
+            "version": "2.5.0",
+            "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+            "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+            "dependencies": {
+                "hosted-git-info": "^2.1.4",
+                "resolve": "^1.10.0",
+                "semver": "2 || 3 || 4 || 5",
+                "validate-npm-package-license": "^3.0.1"
+            }
+        },
+        "node_modules/read-pkg/node_modules/semver": {
+            "version": "5.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+            "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+            "bin": {
+                "semver": "bin/semver"
+            }
+        },
+        "node_modules/read-pkg/node_modules/type-fest": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+            "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/readable-stream": {
             "version": "3.6.2",
             "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -26700,6 +27373,18 @@
                 "node": ">= 0.10"
             }
         },
+        "node_modules/redent": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+            "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+            "dependencies": {
+                "indent-string": "^4.0.0",
+                "strip-indent": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/reduce-flatten": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/reduce-flatten/-/reduce-flatten-1.0.1.tgz",
@@ -28372,6 +29057,34 @@
                 "memory-pager": "^1.0.2"
             }
         },
+        "node_modules/spdx-correct": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
+            "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+            "dependencies": {
+                "spdx-expression-parse": "^3.0.0",
+                "spdx-license-ids": "^3.0.0"
+            }
+        },
+        "node_modules/spdx-exceptions": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+            "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
+        },
+        "node_modules/spdx-expression-parse": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+            "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+            "dependencies": {
+                "spdx-exceptions": "^2.1.0",
+                "spdx-license-ids": "^3.0.0"
+            }
+        },
+        "node_modules/spdx-license-ids": {
+            "version": "3.0.16",
+            "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.16.tgz",
+            "integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw=="
+        },
         "node_modules/spdy": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
@@ -28773,6 +29486,17 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/strip-indent": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+            "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+            "dependencies": {
+                "min-indent": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/strip-json-comments": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -28862,6 +29586,20 @@
             "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
             "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
         },
+        "node_modules/subtag": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/subtag/-/subtag-0.5.0.tgz",
+            "integrity": "sha512-CaIBcTSb/nyk4xiiSOtZYz1B+F12ZxW8NEp54CdT+84vmh/h4sUnHGC6+KQXUfED8u22PQjCYWfZny8d2ELXwg=="
+        },
+        "node_modules/suggestions": {
+            "version": "1.7.1",
+            "resolved": "https://registry.npmjs.org/suggestions/-/suggestions-1.7.1.tgz",
+            "integrity": "sha512-gl5YPAhPYl07JZ5obiD9nTZsg4SyZswAQU/NNtnYiSnFkI3+ZHuXAiEsYm7AaZ71E0LXSFaGVaulGSWN3Gd71A==",
+            "dependencies": {
+                "fuzzy": "^0.1.1",
+                "xtend": "^4.0.0"
+            }
+        },
         "node_modules/supercluster": {
             "version": "8.0.1",
             "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
@@ -29349,6 +30087,14 @@
                 "url": "https://github.com/sponsors/wooorm"
             }
         },
+        "node_modules/trim-newlines": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
+            "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/trough": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz",
@@ -30565,6 +31311,15 @@
             "resolved": "https://registry.npmjs.org/valid-url/-/valid-url-1.0.9.tgz",
             "integrity": "sha512-QQDsV8OnSf5Uc30CKSwG9lnhMPe6exHtTXLRYX8uMwKENy640pU+2BgBL0LRbDh/eYRahNCS7aewCx0wf3NYVA=="
         },
+        "node_modules/validate-npm-package-license": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+            "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+            "dependencies": {
+                "spdx-correct": "^3.0.0",
+                "spdx-expression-parse": "^3.0.0"
+            }
+        },
         "node_modules/validator": {
             "version": "13.11.0",
             "resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",
diff --git a/package.json b/package.json
index 98453a651..90eea7fa1 100644
--- a/package.json
+++ b/package.json
@@ -105,6 +105,7 @@
         "@fortawesome/free-regular-svg-icons": "^6.5.1",
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@mapbox/mapbox-gl-geocoder": "^5.0.2",
         "@mui/icons-material": "^5.14.19",
         "@mui/material": "^5.14.19",
         "@octokit/core": "^5.0.2",
diff --git a/src/client/views/nodes/MapBox/AnimationUtility.ts b/src/client/views/nodes/MapBox/AnimationUtility.ts
index a5cff4668..42dfa59b7 100644
--- a/src/client/views/nodes/MapBox/AnimationUtility.ts
+++ b/src/client/views/nodes/MapBox/AnimationUtility.ts
@@ -7,7 +7,7 @@ import * as turf from '@turf/turf';
 import { Position } from '@turf/turf';
 import { Feature, FeatureCollection, GeoJsonProperties, Geometry } from 'geojson';
 import { observer } from 'mobx-react';
-import { action, computed, observable, runInAction } from 'mobx';
+import { action, computed, observable, runInAction, makeObservable } from 'mobx';
 
 export enum AnimationStatus {
     START = 'start',
@@ -26,16 +26,16 @@ export class AnimationUtility {
     private ROUTE_COORDINATES: Position[] = [];
 
     @observable
-    private PATH: turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties>;
+    private PATH?: turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties> = undefined;
 
-    private PATH_DISTANCE: number;
+    private PATH_DISTANCE: number = 0;
     private FLY_IN_START_PITCH = 40;
-    private FIRST_LNG_LAT: { lng: number; lat: number };
+    private FIRST_LNG_LAT: { lng: number; lat: number } = { lng: 0, lat: 0 };
     private START_ALTITUDE = 3_000_000;
-    private MAP_REF: MapRef | null;
+    private MAP_REF: MapRef | null = null;
 
-    @observable private isStreetViewAnimation: boolean;
-    @observable private animationSpeed: AnimationSpeed;
+    @observable private isStreetViewAnimation: boolean = false;
+    @observable private animationSpeed: AnimationSpeed = AnimationSpeed.MEDIUM;
 
     @observable
     private previousLngLat: { lng: number; lat: number };
@@ -174,6 +174,7 @@ export class AnimationUtility {
     };
 
     constructor(firstLngLat: { lng: number; lat: number }, routeCoordinates: Position[], isStreetViewAnimation: boolean, animationSpeed: AnimationSpeed, terrainDisplayed: boolean, mapRef: MapRef | null) {
+        makeObservable(this);
         this.FIRST_LNG_LAT = firstLngLat;
         this.previousLngLat = firstLngLat;
         this.isStreetViewAnimation = isStreetViewAnimation;
@@ -232,6 +233,7 @@ export class AnimationUtility {
                     return;
                 }
 
+                if (!this.PATH) return;
                 // calculate the distance along the path based on the animationPhase
                 const alongPath = turf.along(this.PATH, this.PATH_DISTANCE * animationPhase).geometry.coordinates;
 
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 724c1a770..735c04c1d 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -3,7 +3,7 @@ import BingMapsReact from 'bingmaps-react';
 // import 'mapbox-gl/dist/mapbox-gl.css';
 
 import { Button, EditableText, IconButton, Size, Type } from 'browndash-components';
-import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction, flow, toJS, autorun} from 'mobx';
+import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction, flow, toJS, autorun, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast, Field, LinkedTo, Opt } from '../../../../fields/Doc';
@@ -28,36 +28,34 @@ import { FieldView, FieldViewProps } from '../FieldView';
 import { FormattedTextBox } from '../formattedText/FormattedTextBox';
 import { PinProps, PresBox } from '../trails';
 import { MapAnchorMenu } from './MapAnchorMenu';
-import * as HME from "h264-mp4-encoder";
-import {simd} from 'wasm-feature-detect';
 
-import { 
+import {
     Map as MapboxMap,
     MapRef,
-    Marker, 
-    ControlPosition, 
-    FullscreenControl,  
-    MapProvider, 
-    MarkerProps, 
-    NavigationControl, 
-    ScaleControl, 
-    ViewState, 
+    Marker,
+    ControlPosition,
+    FullscreenControl,
+    MapProvider,
+    MarkerProps,
+    NavigationControl,
+    ScaleControl,
+    ViewState,
     ViewStateChangeEvent,
     useControl,
     GeolocateControl,
     Popup,
     MapEvent,
     Source,
-    Layer} from 'react-map-gl';
-import MapboxGeocoder, {GeocoderOptions} from '@mapbox/mapbox-gl-geocoder';
-import debounce from 'debounce';
+    Layer,
+} from 'react-map-gl';
+import MapboxGeocoder, { GeocoderOptions } from '@mapbox/mapbox-gl-geocoder!';
 import './MapBox.scss';
 import { NumberLiteralType } from 'typescript';
 // import { GeocoderControl } from './GeocoderControl';
-import mapboxgl, { LngLat, LngLatBoundsLike, LngLatLike, MapLayerMouseEvent, MercatorCoordinate } from 'mapbox-gl';
+import mapboxgl, { LngLat, LngLatBoundsLike, LngLatLike, MapLayerMouseEvent, MercatorCoordinate } from 'mapbox-gl!';
 import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString, MultiLineString, Position } from 'geojson';
 import { MarkerEvent } from 'react-map-gl/dist/esm/types';
-import { MapboxApiUtility, TransportationType} from './MapboxApiUtility';
+import { MapboxApiUtility, TransportationType } from './MapboxApiUtility';
 import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/material';
 import { List } from '../../../../fields/List';
 import { listSpec } from '../../../../fields/Schema';
@@ -65,10 +63,10 @@ import { IconLookup, faCircleXmark, faFileExport, faGear, faMinus, faPause, faPl
 import { MarkerIcons } from './MarkerIcons';
 import { SettingsManager } from '../../../util/SettingsManager';
 import * as turf from '@turf/turf';
-import * as d3 from "d3";
+import * as d3 from 'd3';
 import { AnimationSpeed, AnimationStatus, AnimationUtility } from './AnimationUtility';
 import { fastSpeedIcon, mediumSpeedIcon, slowSpeedIcon } from './AnimationSpeedIcons';
-import { CirclePicker, ColorState } from 'react-color';
+import { CirclePicker, ColorResult } from 'react-color';
 
 // amongus
 /**
@@ -91,24 +89,24 @@ const MAPBOX_FORWARD_GEOCODE_BASE_URL = 'https://api.mapbox.com/geocoding/v5/map
 const MAPBOX_REVERSE_GEOCODE_BASE_URL = 'https://api.mapbox.com/geocoding/v5/mapbox.places/';
 
 type PopupInfo = {
-    longitude: number,
-    latitude: number,
-    title: string,
-    description: string
-}
+    longitude: number;
+    latitude: number;
+    title: string;
+    description: string;
+};
 
 export type GeocoderControlProps = Omit<GeocoderOptions, 'accessToken' | 'mapboxgl' | 'marker'> & {
-    mapboxAccessToken: string,
+    mapboxAccessToken: string;
     marker?: Omit<MarkerProps, 'longitude' | 'latitude'>;
     position: ControlPosition;
 
     onResult: (...args: any[]) => void;
-}
+};
 
 type MapMarker = {
-    longitude: number,
-    latitude: number
-}
+    longitude: number;
+    latitude: number;
+};
 
 /**
  * Consider integrating later: allows for drawing, circling, making shapes on map
@@ -138,6 +136,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     private _disposers: { [key: string]: IReactionDisposer } = {};
     private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void);
 
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     @observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
     @computed get allSidebarDocs() {
         return DocListCast(this.dataDoc[this.SidebarKey]);
@@ -157,7 +160,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             const originalCoordinates: Position[] = JSON.parse(StrCast(this.routeToAnimate.routeCoordinates));
             // const index = Math.floor(this.animationPhase * originalCoordinates.length);
             const index = this.animationPhase * (originalCoordinates.length - 1); // Calculate the fractional index
-            console.log("Animation phase", this.animationPhase);
+            console.log('Animation phase', this.animationPhase);
             const startIndex = Math.floor(index);
             const endIndex = Math.ceil(index);
             let feature: Feature<Geometry, GeoJsonProperties>;
@@ -173,7 +176,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 feature = {
                     type: 'Feature',
                     properties: {
-                        'routeTitle': StrCast(this.routeToAnimate.title)
+                        routeTitle: StrCast(this.routeToAnimate.title),
                     },
                     geometry: geometry,
                 };
@@ -186,7 +189,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 const interpolator = d3.interpolateArray(startCoord, endCoord);
 
                 const interpolatedCoord = interpolator(fraction);
-    
+
                 const coordinates = originalCoordinates.slice(0, startIndex + 1).concat([interpolatedCoord]);
 
                 geometry = {
@@ -196,12 +199,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 feature = {
                     type: 'Feature',
                     properties: {
-                        'routeTitle': StrCast(this.routeToAnimate.title)
+                        routeTitle: StrCast(this.routeToAnimate.title),
                     },
                     geometry: geometry,
                 };
             }
-            
+
             autorun(() => {
                 const animationUtil = this.animationUtility;
                 const concattedCoordinates = geometry.coordinates.concat(originalCoordinates.slice(endIndex));
@@ -210,28 +213,28 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     properties: {},
                     geometry: {
                         type: 'LineString',
-                        coordinates: concattedCoordinates
-                    }
-                } 
-                if (animationUtil){
-                    animationUtil.setPath(newFeature)
+                        coordinates: concattedCoordinates,
+                    },
+                };
+                if (animationUtil) {
+                    animationUtil.setPath(newFeature);
                 }
-            })
+            });
             return feature;
         }
-        console.log("ERROR");
+        console.log('ERROR');
         return {
             type: 'Feature',
             properties: {},
             geometry: {
                 type: 'LineString',
-                coordinates: []
+                coordinates: [],
             },
         };
     }
     @computed get selectedRouteCoordinates(): Position[] {
         let coordinates: Position[] = [];
-        if (this.routeToAnimate?.routeCoordinates){
+        if (this.routeToAnimate?.routeCoordinates) {
             coordinates = JSON.parse(StrCast(this.routeToAnimate.routeCoordinates));
         }
         return coordinates;
@@ -247,7 +250,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             return {
                 type: 'Feature',
                 properties: {
-                    'routeTitle': routeDoc.title},
+                    routeTitle: routeDoc.title,
+                },
                 geometry: geometry,
             };
         });
@@ -265,7 +269,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%');
     }
     @computed get sidebarColor() {
-        return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.props.fieldKey + '_backgroundColor'], '#e4e4e4'));
+        return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this._props.fieldKey + '_backgroundColor'], '#e4e4e4'));
     }
     @computed get SidebarKey() {
         return this.fieldKey + '_sidebar';
@@ -273,11 +277,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     componentDidMount() {
         this._unmounting = false;
-        this.props.setContentView?.(this);
-
+        this._props.setContentView?.(this);
     }
 
-
     _unmounting = false;
     componentWillUnmount(): void {
         this._unmounting = true;
@@ -340,9 +342,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             e,
             (e, down, delta) =>
                 runInAction(() => {
-                    const localDelta = this.props
+                    const localDelta = this._props
                         .ScreenToLocalTransform()
-                        .scale(this.props.NativeDimScaling?.() || 1)
+                        .scale(this._props.NativeDimScaling?.() || 1)
                         .transformDirection(delta[0], delta[1]);
                     const fullWidth = NumCast(this.layoutDoc._width);
                     const mapWidth = fullWidth - this.sidebarWidth();
@@ -361,7 +363,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             () => UndoManager.RunInBatch(this.toggleSidebar, 'toggle sidebar map')
         );
     };
-    sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth();
+    sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth();
 
     /**
      * Handles toggle of sidebar on click the little comment button
@@ -373,8 +375,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 key="sidebar"
                 title="Toggle Sidebar"
                 style={{
-                    display: !this.props.isContentActive() ? 'none' : undefined,
-                    top: StrCast(this.rootDoc._layout_showTitle) === 'title' ? 20 : 5,
+                    display: !this._props.isContentActive() ? 'none' : undefined,
+                    top: StrCast(this.Document._layout_showTitle) === 'title' ? 20 : 5,
                     backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
                 }}
                 onPointerDown={this.sidebarBtnDown}>
@@ -406,16 +408,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         });
 
         const targetCreator = (annotationOn: Doc | undefined) => {
-            const target = DocUtils.GetNewTextDoc('Note linked to ' + this.rootDoc.title, 0, 0, 100, 100, undefined, annotationOn, undefined, 'yellow');
-            FormattedTextBox.SelectOnLoad = target[Id];
+            const target = DocUtils.GetNewTextDoc('Note linked to ' + this.Document.title, 0, 0, 100, 100, undefined, annotationOn, undefined, 'yellow');
+            FormattedTextBox.SetSelectOnLoad(target);
             return target;
         };
-        const docView = this.props.DocumentView?.();
+        const docView = this._props.DocumentView?.();
         docView &&
             DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(docView, sourceAnchorCreator, targetCreator), e.pageX, e.pageY, {
                 dragComplete: e => {
                     if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) {
-                        e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.Document;
+                        e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this._props.Document;
                         e.annoDragData.linkSourceDoc.followLinkZoom = false;
                     }
                 },
@@ -454,15 +456,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     addDocumentWrapper = (doc: Doc | Doc[], annotationKey?: string) => this.addDocument(doc, annotationKey);
 
-    pointerEvents = () => (this.props.isContentActive() && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : 'none');
+    pointerEvents = () => (this._props.isContentActive() && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : 'none');
 
-    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));
-    transparentFilter = () => [...this.props.childFilters(), Utils.TransparentBackgroundFilter];
-    opaqueFilter = () => [...this.props.childFilters(), Utils.OpaqueBackgroundFilter];
-    infoWidth = () => this.props.PanelWidth() / 5;
-    infoHeight = () => this.props.PanelHeight() / 5;
+    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));
+    transparentFilter = () => [...this._props.childFilters(), Utils.TransparentBackgroundFilter];
+    opaqueFilter = () => [...this._props.childFilters(), Utils.OpaqueBackgroundFilter];
+    infoWidth = () => this._props.PanelWidth() / 5;
+    infoHeight = () => this._props.PanelHeight() / 5;
     anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick;
     savedAnnotations = () => this._savedAnnotations;
 
@@ -500,7 +502,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     };
 
     @observable
-    bingSearchBarContents: any = this.rootDoc.map; // For Bing Maps: The contents of the Bing search bar (string)
+    bingSearchBarContents: any = this.Document.map; // For Bing Maps: The contents of the Bing search bar (string)
 
     geoDataRequestOptions = {
         entityType: 'PopulatedPlace',
@@ -509,15 +511,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     // The pin that is selected
     @observable selectedPinOrRoute: Doc | undefined;
 
-
     @action
     deselectPinOrRoute = () => {
         if (this.selectedPinOrRoute) {
             // // 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, `mapPin=${Field.toScriptString(DocCast(this.selectedPin))}`, 'remove');
-
+            // Doc.setDocFilter(this.Document, 'latitude', this.selectedPin.latitude, 'remove');
+            // Doc.setDocFilter(this.Document, 'longitude', this.selectedPin.longitude, 'remove');
+            // Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this.selectedPin))}`, 'remove');
             // const temp = this.selectedPin;
             // if (!this._unmounting) {
             //     this._bingMap.current.entities.remove(this.map_docToPinMap.get(temp));
@@ -529,11 +529,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             // }
             // this.map_docToPinMap.set(temp, newpin);
             // this.selectedPin = undefined;
-            // this.bingSearchBarContents = this.rootDoc.map;
+            // this.bingSearchBarContents = this.Document.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)));
@@ -547,9 +546,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.selectedPinOrRoute = 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, `mapPin=${Field.toScriptString(this.selectedPinOrRoute)}`, 'check');
+        // Doc.setDocFilter(this.Document, 'latitude', this.selectedPin.latitude, 'match');
+        // Doc.setDocFilter(this.Document, 'longitude', this.selectedPin.longitude, 'match');
+        Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(this.selectedPinOrRoute)}`, 'check');
 
         this.recolorPin(this.selectedPinOrRoute, 'green');
 
@@ -559,9 +558,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag;
 
         const point = this._bingMap.current.tryLocationToPixel(new this.MicrosoftMaps.Location(this.selectedPinOrRoute.latitude, this.selectedPinOrRoute.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);
+        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);
@@ -572,7 +571,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      */
     @action
     mapOnClick = (e: { location: { latitude: any; longitude: any } }) => {
-        this.props.select(false);
+        this._props.select(false);
         this.deselectPinOrRoute();
     };
     /*
@@ -618,8 +617,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     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.selectedPinOrRoute?.map) || StrCast(this.rootDoc.map) || 'map location',
+            title: 'MapAnchor:' + this.Document.title,
+            text: StrCast(this.selectedPinOrRoute?.map) || StrCast(this.Document.map) || 'map location',
             config_latitude: NumCast((existingPin ?? this.selectedPinOrRoute)?.latitude ?? this.dataDoc.latitude),
             config_longitude: NumCast((existingPin ?? this.selectedPinOrRoute)?.longitude ?? this.dataDoc.longitude),
             config_map_zoom: NumCast(this.dataDoc.map_zoom),
@@ -627,15 +626,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             config_map: StrCast((existingPin ?? this.selectedPinOrRoute)?.map) || StrCast(this.dataDoc.map),
             layout_unrendered: true,
             mapPin: existingPin ?? this.selectedPinOrRoute,
-            annotationOn: this.rootDoc,
+            annotationOn: this.Document,
         });
         if (anchor) {
             if (!addAsAnnotation) anchor.backgroundColor = 'transparent';
             addAsAnnotation && this.addDocument(anchor);
-            PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), map: true } }, this.rootDoc);
+            PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), map: true } }, this.Document);
             return anchor;
         }
-        return this.rootDoc;
+        return this.Document;
     };
 
     map_docToPinMap = new Map<Doc, any>();
@@ -682,9 +681,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     deleteSelectedPinOrRoute = undoable(() => {
         if (this.selectedPinOrRoute) {
             // Removes filter
-            Doc.setDocFilter(this.rootDoc, 'latitude', this.selectedPinOrRoute.latitude, 'remove');
-            Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPinOrRoute.longitude, 'remove');
-            Doc.setDocFilter(this.rootDoc, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this.selectedPinOrRoute))}`, 'remove');
+            Doc.setDocFilter(this.Document, 'latitude', this.selectedPinOrRoute.latitude, 'remove');
+            Doc.setDocFilter(this.Document, 'longitude', this.selectedPinOrRoute.longitude, 'remove');
+            Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this.selectedPinOrRoute))}`, 'remove');
 
             this.removePushpinOrRoute(this.selectedPinOrRoute);
         }
@@ -692,8 +691,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
     }, 'delete pin');
 
-
-
     tryHideMapAnchorMenu = (e: PointerEvent) => {
         let target = document.elementFromPoint(e.x, e.y);
         while (target) {
@@ -711,8 +708,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     centerOnSelectedPin = () => {
         if (this.selectedPinOrRoute) {
             this._mapRef.current?.flyTo({
-                center: [NumCast(this.selectedPinOrRoute.longitude), NumCast(this.selectedPinOrRoute.latitude)]
-            })
+                center: [NumCast(this.selectedPinOrRoute.longitude), NumCast(this.selectedPinOrRoute.latitude)],
+            });
         }
         // if (this.selectedPin) {
         //     this.dataDoc.latitude = this.selectedPin.latitude;
@@ -733,7 +730,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         mapTypeId: 'grayscale',
     };
 
-
     /**
      * Map options
      */
@@ -752,8 +748,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         },
     };
 
-
-
     recolorPin = (pin: Doc, color?: string) => {
         // this._bingMap.current.entities.remove(this.map_docToPinMap.get(pin));
         // this.map_docToPinMap.delete(pin);
@@ -780,7 +774,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'maptypechanged', undoable(this.updateMapType, 'Map ViewType Change'));
 
         this._disposers.mapLocation = reaction(
-            () => this.rootDoc.map,
+            () => this.Document.map,
             mapLoc => (this.bingSearchBarContents = mapLoc),
             { fireImmediately: true }
         );
@@ -805,7 +799,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         );
 
         this._disposers.location = reaction(
-            () => ({ lat: this.rootDoc.latitude, lng: this.rootDoc.longitude, zoom: this.rootDoc.map_zoom, mapType: this.rootDoc.map_type }),
+            () => ({ lat: this.Document.latitude, lng: this.Document.longitude, zoom: this.Document.map_zoom, mapType: this.Document.map_type }),
             locationObject => {
                 // if (this._bingMap.current)
                 try {
@@ -829,25 +823,27 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         setupMoveUpEvents(
             e,
             e,
-            e => { // move event 
+            e => {
+                // move event
                 if (!dragClone) {
-                    dragClone = this._dragRef.current?.cloneNode(true) as HTMLDivElement; // copy draggable pin 
+                    dragClone = this._dragRef.current?.cloneNode(true) as HTMLDivElement; // copy draggable pin
                     dragClone.style.position = 'absolute';
                     dragClone.style.zIndex = '10000';
-                    DragManager.Root().appendChild(dragClone); // add clone to root 
+                    DragManager.Root().appendChild(dragClone); // add clone to root
                 }
                 dragClone.style.transform = `translate(${e.clientX - 15}px, ${e.clientY - 15}px)`;
                 return false;
             },
-            e => { // up event
+            e => {
+                // up event
                 if (!dragClone) return;
                 DragManager.Root().removeChild(dragClone);
                 let target = document.elementFromPoint(e.x, e.y); // element for specified x and y coordinates
                 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] - 20 /* height of search bar */ - this.props.PanelHeight() / 2;
+                    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] - 20 /* 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;
@@ -856,7 +852,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 }
             },
             e => {
-                const createPin = () => this.createPushpin(this.rootDoc.latitude, this.rootDoc.longitude, this.rootDoc.map);
+                const createPin = () => this.createPushpin(this.Document.latitude, this.Document.longitude, this.Document.map);
                 if (this.bingSearchBarContents) {
                     this.bingSearch().then(createPin);
                 } else createPin();
@@ -864,7 +860,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         );
     };
 
-        // incrementer: number = 0;
+    // incrementer: number = 0;
     /*
      * Creates Pushpin doc and adds it to the list of annotations
      */
@@ -877,13 +873,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             false,
             [],
             {
-                title: location ?? `lat=${NumCast(latitude)},lng=${NumCast(longitude)}`, 
-                map: location, 
-                description: "", 
+                title: location ?? `lat=${NumCast(latitude)},lng=${NumCast(longitude)}`,
+                map: location,
+                description: '',
                 wikiData: wikiData,
                 markerType: 'MAP_PIN',
-                markerColor: '#ff5722'
-            },
+                markerColor: '#ff5722',
+            }
             // { title: map ?? `lat=${latitude},lng=${longitude}`, map: map },
             // ,'pushpinIDamongus'+ this.incrementer++
         );
@@ -896,11 +892,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     @action
     createMapRoute = undoable((coordinates: Position[], origin: string, destination: any, createPinForDestination: boolean) => {
-        const mapRoute = Docs.Create.MapRouteDocument(
-            false,
-            [],
-            {title: `${origin} --> ${destination.place_name}`, routeCoordinates: JSON.stringify(coordinates)},
-        );
+        const mapRoute = Docs.Create.MapRouteDocument(false, [], { title: `${origin} --> ${destination.place_name}`, routeCoordinates: JSON.stringify(coordinates) });
         this.addDocument(mapRoute, this.annotationKey);
         if (createPinForDestination) {
             this.createPushpin(destination.center[1], destination.center[0], destination.place_name);
@@ -912,43 +904,29 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     searchbarKeyDown = (e: any) => e.key === 'Enter' && this.bingSearch();
 
-
-
-
-
-
     @observable
     featuresFromGeocodeResults: any[] = [];
 
-
     @action
     addMarkerForFeature = (feature: any) => {
         const location = feature.place_name;
-        if (feature.center){
+        if (feature.center) {
             const longitude = feature.center[0];
             const latitude = feature.center[1];
             const wikiData = feature.properties?.wikiData;
-    
-            this.createPushpin(
-                latitude, 
-                longitude, 
-                location, 
-                wikiData
-            )
-
-            if (this._mapRef.current){
+
+            this.createPushpin(latitude, longitude, location, wikiData);
+
+            if (this._mapRef.current) {
                 this._mapRef.current.flyTo({
-                    center: feature.center
+                    center: feature.center,
                 });
             }
             this.featuresFromGeocodeResults = [];
-
         } else {
             // TODO: handle error
         }
-    }
-
-
+    };
 
     /**
      * Makes a forward geocoding API call to Mapbox to retrieve locations based on the search input
@@ -956,12 +934,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      */
     handleSearchChange = async (searchText: string) => {
         const features = await MapboxApiUtility.forwardGeocodeForFeatures(searchText);
-        if (features && !this.isAnimating){
+        if (features && !this.isAnimating) {
             runInAction(() => {
-                this.settingsOpen= false;
+                this.settingsOpen = false;
                 this.featuresFromGeocodeResults = features;
                 this.routeToAnimate = undefined;
-            })
+            });
         }
         // try {
         //     const url = MAPBOX_FORWARD_GEOCODE_BASE_URL + encodeURI(searchText) +'.json' +`?access_token=${MAPBOX_ACCESS_TOKEN}`;
@@ -971,34 +949,31 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         //         this.featuresFromGeocodeResults = data.features;
         //     })
         // } catch (error: any){
-        //     // TODO: handle error in better way 
+        //     // TODO: handle error in better way
         //     console.log(error);
         // }
-    }
+    };
     // @action
     // debouncedCall = React.useCallback(debounce(this.debouncedOnSearchBarChange, 300), []);
 
-
     @action
     handleMapClick = (e: MapLayerMouseEvent) => {
-        if (this._mapRef.current){
-            const features = this._mapRef.current.queryRenderedFeatures(
-                e.point, {
-                    layers: ['map-routes-layer']
-                }
-            );
+        if (this._mapRef.current) {
+            const features = this._mapRef.current.queryRenderedFeatures(e.point, {
+                layers: ['map-routes-layer'],
+            });
 
             console.error(features);
             if (features && features.length > 0 && features[0].properties && features[0].geometry) {
                 const geometry = features[0].geometry as LineString;
                 const routeTitle: string = features[0].properties['routeTitle'];
-                const routeDoc: Doc | undefined = this.allRoutes.find((routeDoc) => routeDoc.title === routeTitle);
+                const routeDoc: Doc | undefined = this.allRoutes.find(routeDoc => routeDoc.title === routeTitle);
                 this.deselectPinOrRoute(); // TODO: Also deselect route if selected
-                if (routeDoc){
+                if (routeDoc) {
                     this.selectedPinOrRoute = routeDoc;
-                    Doc.setDocFilter(this.rootDoc, LinkedTo, `mapRoute=${Field.toScriptString(this.selectedPinOrRoute)}`, 'check');
+                    Doc.setDocFilter(this.Document, LinkedTo, `mapRoute=${Field.toScriptString(this.selectedPinOrRoute)}`, 'check');
 
-                    // TODO: Recolor route 
+                    // TODO: Recolor route
 
                     MapAnchorMenu.Instance.Delete = this.deleteSelectedPinOrRoute;
                     MapAnchorMenu.Instance.Center = this.centerOnSelectedPin;
@@ -1008,9 +983,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     MapAnchorMenu.Instance.setRouteDoc(routeDoc);
 
                     // TODO: Subject to change
-                    MapAnchorMenu.Instance.setAllMapboxPins(
-                        this.allAnnotations.filter(anno => !anno.layout_unrendered)
-                    )
+                    MapAnchorMenu.Instance.setAllMapboxPins(this.allAnnotations.filter(anno => !anno.layout_unrendered));
 
                     MapAnchorMenu.Instance.DisplayRoute = this.displayRoute;
                     MapAnchorMenu.Instance.HideRoute = this.hideRoute;
@@ -1025,16 +998,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     MapAnchorMenu.Instance.jumpTo(e.originalEvent.clientX, e.originalEvent.clientY, true);
 
                     document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
-                }        
+                }
             }
         }
-    }
-
+    };
 
     /**
      * Makes a reverse geocoding API call to retrieve features corresponding to a map click (based on longitude
-     * and latitude). Sets the search results accordingly. 
-     * @param e 
+     * and latitude). Sets the search results accordingly.
+     * @param e
      */
     handleMapDblClick = async (e: MapLayerMouseEvent) => {
         e.preventDefault();
@@ -1043,13 +1015,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         const latitude: number = lngLat.lat;
 
         const features = await MapboxApiUtility.reverseGeocodeForFeatures(longitude, latitude);
-        if (features){
+        if (features) {
             runInAction(() => {
                 this.featuresFromGeocodeResults = features;
-            })
+            });
         }
 
-        // // REVERSE GEOCODE TO GET LOCATION DETAILS 
+        // // REVERSE GEOCODE TO GET LOCATION DETAILS
         // try {
         //     const url = MAPBOX_REVERSE_GEOCODE_BASE_URL + encodeURI(longitude.toString() + "," + latitude.toString()) + '.json' +
         //         `?access_token=${MAPBOX_ACCESS_TOKEN}`;
@@ -1063,9 +1035,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         //     // TODO: handle error in better way
         //     console.log(error);
         // }
-    }
+    };
 
-    @observable 
+    @observable
     currentPopup: PopupInfo | undefined = undefined;
 
     @action
@@ -1075,23 +1047,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.selectedPinOrRoute = 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, `mapPin=${Field.toScriptString(this.selectedPinOrRoute)}`, 'check');
+        // Doc.setDocFilter(this.Document, 'latitude', this.selectedPin.latitude, 'match');
+        // Doc.setDocFilter(this.Document, 'longitude', this.selectedPin.longitude, 'match');
+        Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(this.selectedPinOrRoute)}`, 'check');
 
         this.recolorPin(this.selectedPinOrRoute, 'green'); // TODO: check this method
-       
-        
+
         MapAnchorMenu.Instance.Delete = this.deleteSelectedPinOrRoute;
         MapAnchorMenu.Instance.Center = this.centerOnSelectedPin;
         MapAnchorMenu.Instance.OnClick = this.createNoteAnnotation;
         MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag;
 
-        // pass in the pinDoc 
+        // pass in the pinDoc
         MapAnchorMenu.Instance.setPinDoc(pinDoc);
-        MapAnchorMenu.Instance.setAllMapboxPins(
-            this.allAnnotations.filter(anno => !anno.layout_unrendered)
-        )
+        MapAnchorMenu.Instance.setAllMapboxPins(this.allAnnotations.filter(anno => !anno.layout_unrendered));
 
         MapAnchorMenu.Instance.DisplayRoute = this.displayRoute;
         MapAnchorMenu.Instance.HideRoute = this.hideRoute;
@@ -1106,22 +1075,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
         document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
 
-        
-            // this._mapRef.current.flyTo({
-            //     center: [NumCast(pinDoc.longitude), NumCast(pinDoc.latitude)-3]
-            // })
-        
+        // this._mapRef.current.flyTo({
+        //     center: [NumCast(pinDoc.longitude), NumCast(pinDoc.latitude)-3]
+        // })
     };
 
     @observable
     temporaryRouteSource: FeatureCollection = {
         type: 'FeatureCollection',
-        features: []
-    }
+        features: [],
+    };
 
     @action
     displayRoute = (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => {
-        if (routeInfoMap){
+        if (routeInfoMap) {
             const newTempRouteSource: FeatureCollection = {
                 type: 'FeatureCollection',
                 features: [
@@ -1130,16 +1097,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         properties: {},
                         geometry: {
                             type: 'LineString',
-                            coordinates: routeInfoMap[type].coordinates
-                        }
-                    }
-                ]
-            }
-            // TODO: Create pin for destination 
-            // TODO: Fly to point where full route will be shown 
+                            coordinates: routeInfoMap[type].coordinates,
+                        },
+                    },
+                ],
+            };
+            // TODO: Create pin for destination
+            // TODO: Fly to point where full route will be shown
             this.temporaryRouteSource = newTempRouteSource;
         }
-    }
+    };
 
     @observable
     isAnimating: boolean = false;
@@ -1147,10 +1114,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @observable
     routeToAnimate: Doc | undefined = undefined;
 
-    @observable 
+    @observable
     animationPhase: number = 0;
 
-    @observable 
+    @observable
     finishedFlyTo: boolean = false;
 
     @action
@@ -1158,73 +1125,71 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.animationPhase = newValue;
     };
 
-    @observable 
+    @observable
     frameId: number | null = null;
 
     @action
     setFrameId = (frameId: number) => {
         this.frameId = frameId;
-    }
+    };
 
-    @observable 
+    @observable
     animationUtility: AnimationUtility | null = null;
 
     @action
     setAnimationUtility = (util: AnimationUtility) => {
         this.animationUtility = util;
-    }
+    };
 
     @action
     openAnimationPanel = (routeDoc: Doc | undefined) => {
-        if (routeDoc){
+        if (routeDoc) {
             MapAnchorMenu.Instance.fadeOut(true);
             document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
             this.routeToAnimate = routeDoc;
         }
-    }
+    };
 
     @observable
     mapboxMapViewState: ViewState = {
         zoom: this.dataDoc.map_zoom ? NumCast(this.dataDoc.map_zoom) : 8,
-        longitude: this.dataDoc.longitude ? NumCast(this.dataDoc.longitude) : -71.4128, 
-        latitude: this.dataDoc.latitude ? NumCast(this.dataDoc.latitude) : 41.8240,
+        longitude: this.dataDoc.longitude ? NumCast(this.dataDoc.longitude) : -71.4128,
+        latitude: this.dataDoc.latitude ? NumCast(this.dataDoc.latitude) : 41.824,
         pitch: this.dataDoc.map_pitch ? NumCast(this.dataDoc.map_pitch) : 0,
         bearing: this.dataDoc.map_bearing ? NumCast(this.dataDoc.map_bearing) : 0,
         padding: {
             top: 0,
             bottom: 0,
             left: 0,
-            right: 0
+            right: 0,
         },
-    }
+    };
 
-    @computed 
+    @computed
     get preAnimationViewState() {
-        if (!this.isAnimating){
+        if (!this.isAnimating) {
             return this.mapboxMapViewState;
         }
     }
 
-
-    @observable 
+    @observable
     isStreetViewAnimation: boolean = false;
 
-    @observable 
+    @observable
     animationSpeed: AnimationSpeed = AnimationSpeed.MEDIUM;
 
-
     @observable
     animationLineColor: string = '#ffff00';
 
     @action
-    setAnimationLineColor = (color: ColorState) => {
+    setAnimationLineColor = (color: ColorResult) => {
         this.animationLineColor = color.hex;
-    } 
+    };
 
     @action
     updateAnimationSpeed = () => {
         let newAnimationSpeed: AnimationSpeed;
-        switch (this.animationSpeed){
+        switch (this.animationSpeed) {
             case AnimationSpeed.SLOW:
                 newAnimationSpeed = AnimationSpeed.MEDIUM;
                 break;
@@ -1239,63 +1204,62 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 break;
         }
         this.animationSpeed = newAnimationSpeed;
-        if (this.animationUtility){
+        if (this.animationUtility) {
             this.animationUtility.updateAnimationSpeed(newAnimationSpeed);
         }
-    }
+    };
     @computed get animationSpeedTooltipText(): string {
         switch (this.animationSpeed) {
-          case AnimationSpeed.SLOW:
-            return '1x speed';
-          case AnimationSpeed.MEDIUM:
-            return '2x speed';
-          case AnimationSpeed.FAST:
-            return '3x speed';
-          default:
-            return '2x speed'; 
+            case AnimationSpeed.SLOW:
+                return '1x speed';
+            case AnimationSpeed.MEDIUM:
+                return '2x speed';
+            case AnimationSpeed.FAST:
+                return '3x speed';
+            default:
+                return '2x speed';
         }
     }
-    @computed get animationSpeedIcon(): JSX.Element{
+    @computed get animationSpeedIcon(): JSX.Element {
         switch (this.animationSpeed) {
             case AnimationSpeed.SLOW:
-              return slowSpeedIcon;
+                return slowSpeedIcon;
             case AnimationSpeed.MEDIUM:
-              return mediumSpeedIcon;
+                return mediumSpeedIcon;
             case AnimationSpeed.FAST:
-              return fastSpeedIcon;
+                return fastSpeedIcon;
             default:
-              return mediumSpeedIcon; 
-          }
+                return mediumSpeedIcon;
+        }
     }
 
     @action
     toggleIsStreetViewAnimation = () => {
         const newVal = !this.isStreetViewAnimation;
         this.isStreetViewAnimation = newVal;
-        if (this.animationUtility){
-            this.animationUtility.updateIsStreetViewAnimation(newVal)
+        if (this.animationUtility) {
+            this.animationUtility.updateIsStreetViewAnimation(newVal);
         }
-    }
+    };
 
-    @observable 
+    @observable
     dynamicRouteFeature: Feature<Geometry, GeoJsonProperties> = {
         type: 'Feature',
         properties: {},
         geometry: {
             type: 'LineString',
-            coordinates: []
-        }
+            coordinates: [],
+        },
     };
 
-
-    @observable 
+    @observable
     path: turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties> = {
         type: 'Feature',
         geometry: {
             type: 'LineString',
-            coordinates: []
+            coordinates: [],
         },
-        properties: {}
+        properties: {},
     };
 
     getFeatureFromRouteDoc = (routeDoc: Doc): Feature<Geometry, GeoJsonProperties> => {
@@ -1306,14 +1270,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return {
             type: 'Feature',
             properties: {
-                'routeTitle': routeDoc.title},
+                routeTitle: routeDoc.title,
+            },
             geometry: geometry,
         };
-    }
+    };
 
-    @action 
+    @action
     playAnimation = (status: AnimationStatus) => {
-        if (!this._mapRef.current || !this.routeToAnimate){
+        if (!this._mapRef.current || !this.routeToAnimate) {
             return;
         }
 
@@ -1322,43 +1287,32 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.finishedFlyTo = AnimationStatus.RESUME ? this.finishedFlyTo : false;
 
         const path = turf.lineString(this.selectedRouteCoordinates);
-        
+
         this.settingsOpen = false;
         this.path = path;
         this.isAnimating = true;
 
         runInAction(() => {
-            return new Promise<void>(async (resolve) => {
+            return new Promise<void>(async resolve => {
                 const targetLngLat = {
                     lng: this.selectedRouteCoordinates[0][0],
                     lat: this.selectedRouteCoordinates[0][1],
                 };
 
-                const animationUtil = new AnimationUtility(
-                    targetLngLat,
-                    this.selectedRouteCoordinates,
-                    this.isStreetViewAnimation,
-                    this.animationSpeed,
-                    this.showTerrain,
-                    this._mapRef.current
-                );
+                const animationUtil = new AnimationUtility(targetLngLat, this.selectedRouteCoordinates, this.isStreetViewAnimation, this.animationSpeed, this.showTerrain, this._mapRef.current);
                 runInAction(() => {
                     this.setAnimationUtility(animationUtil);
-                })
-
+                });
 
                 const updateFrameId = (newFrameId: number) => {
                     this.setFrameId(newFrameId);
-                }
+                };
 
-                const updateAnimationPhase = (
-                    newAnimationPhase: number,
-                    ) => {
+                const updateAnimationPhase = (newAnimationPhase: number) => {
                     this.setAnimationPhase(newAnimationPhase);
                 };
-                
-                if (status !== AnimationStatus.RESUME) {
 
+                if (status !== AnimationStatus.RESUME) {
                     const result = await animationUtil.flyInAndRotate({
                         map: this._mapRef.current!,
                         // targetLngLat,
@@ -1372,18 +1326,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         updateFrameId,
                     });
 
-                    console.log("Bearing: ", result.bearing);
-                    console.log("Altitude: ", result.altitude);
-
-                } 
+                    console.log('Bearing: ', result.bearing);
+                    console.log('Altitude: ', result.altitude);
+                }
 
                 runInAction(() => {
                     this.finishedFlyTo = true;
-                })
+                });
 
                 // follow the path while slowly rotating the camera, passing in the camera bearing and altitude from the previous animation
                 await animationUtil.animatePath({
-                    map: this._mapRef.current!, 
+                    map: this._mapRef.current!,
                     // path: this.path,
                     // startBearing: -20,
                     // startAltitude: this.isStreetViewAnimation ? 80 : 12000,
@@ -1392,43 +1345,39 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     updateAnimationPhase,
                     updateFrameId,
                 });
-            
+
                 // get the bounds of the linestring, use fitBounds() to animate to a final view
                 const bbox3d = turf.bbox(this.path);
-    
+
                 const bbox2d: LngLatBoundsLike = [bbox3d[0], bbox3d[1], bbox3d[2], bbox3d[3]];
-    
+
                 this._mapRef.current!.fitBounds(bbox2d, {
                     duration: 3000,
                     pitch: 30,
                     bearing: 0,
                     padding: 120,
                 });
-            
+
                 setTimeout(() => {
                     this.isStreetViewAnimation = false;
                     resolve();
                 }, 10000);
             });
-            
-        })
-            
-
-    }
-
+        });
+    };
 
-    @action 
+    @action
     pauseAnimation = () => {
-        if (this.frameId && this.animationPhase > 0){
+        if (this.frameId && this.animationPhase > 0) {
             window.cancelAnimationFrame(this.frameId);
             this.frameId = null;
             this.isAnimating = false;
         }
-    }
+    };
 
     @action
     stopAnimation = (close: boolean) => {
-        if (this.frameId){
+        if (this.frameId) {
             window.cancelAnimationFrame(this.frameId);
         }
         this.animationPhase = 0;
@@ -1441,22 +1390,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             this.routeToAnimate = undefined;
             this.animationUtility = null;
         }
-        if (this.preAnimationViewState){
+        if (this.preAnimationViewState) {
             this.mapboxMapViewState = this.preAnimationViewState;
         }
-        
- 
-    }
+    };
 
     @action
-    exportAnimationToVideo = () => {
-
-    }
+    exportAnimationToVideo = () => {};
 
     getRouteAnimationOptions = (): JSX.Element => {
         return (
             <>
-                <IconButton 
+                <IconButton
                     tooltip={this.isAnimating && this.finishedFlyTo ? 'Pause Animation' : 'Play Animation'}
                     onPointerDown={() => {
                         if (this.isAnimating && this.finishedFlyTo) {
@@ -1467,87 +1412,57 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             this.playAnimation(AnimationStatus.START); // Play from the beginning
                         }
                     }}
-                    icon={this.isAnimating && this.finishedFlyTo ? 
-                        <FontAwesomeIcon icon={faPause as IconLookup}/>  
-                        :
-                        <FontAwesomeIcon icon={faPlay as IconLookup}/>    
-                    }
-                    color='black'
-                    size={Size.MEDIUM}
-                />
-                {this.isAnimating && this.finishedFlyTo && 
-                <IconButton 
-                    tooltip='Restart animation'
-                    onPointerDown={() => {
-                        this.stopAnimation(false);
-                        this.playAnimation(AnimationStatus.START)
-                    }}
-                    icon={<FontAwesomeIcon icon={faRotate as IconLookup}/>}
-                    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'
+                    icon={this.isAnimating && this.finishedFlyTo ? <FontAwesomeIcon icon={faPause as IconLookup} /> : <FontAwesomeIcon icon={faPlay as IconLookup} />}
+                    color="black"
                     size={Size.MEDIUM}
                 />
+                {this.isAnimating && this.finishedFlyTo && (
+                    <IconButton
+                        tooltip="Restart animation"
+                        onPointerDown={() => {
+                            this.stopAnimation(false);
+                            this.playAnimation(AnimationStatus.START);
+                        }}
+                        icon={<FontAwesomeIcon icon={faRotate as IconLookup} />}
+                        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} />
                 <>
-                    <div className='animation-suboptions'>
+                    <div className="animation-suboptions">
                         <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}
-                                />
-                            }
-                        />
-                        <div id='divider'>|</div>
-                        <IconButton
-                            tooltip={this.animationSpeedTooltipText}
-                            onPointerDown={this.updateAnimationSpeed}
-                            icon={this.animationSpeedIcon}
-                            size={Size.MEDIUM}
+                            className="first-person-label"
+                            style={{ width: '130px' }}
+                            label="1st person animation:"
+                            labelPlacement="start"
+                            control={<Checkbox color="success" checked={this.isStreetViewAnimation} onChange={this.toggleIsStreetViewAnimation} />}
                         />
-                        <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 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>
-                </>            
+                </>
             </>
-        )
-    }
+        );
+    };
 
     @action
     hideRoute = () => {
         this.temporaryRouteSource = {
             type: 'FeatureCollection',
-            features: []
-        }
-    }
-
+            features: [],
+        };
+    };
 
-    @observable 
+    @observable
     settingsOpen: boolean = false;
 
-    @observable 
-    mapStyle: string = 'mapbox://styles/mapbox/streets-v12'
+    @observable
+    mapStyle: string = 'mapbox://styles/mapbox/streets-v12';
 
     @observable
     showTerrain: boolean = true;
@@ -1558,103 +1473,94 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             this.featuresFromGeocodeResults = [];
             this.settingsOpen = !this.settingsOpen;
         }
-    }
+    };
 
     @action
     changeMapStyle = (e: React.ChangeEvent<HTMLSelectElement>) => {
         this.dataDoc.map_style = `mapbox://styles/mapbox/${e.target.value}`;
         // this.mapStyle = `mapbox://styles/mapbox/${e.target.value}`
-    }
+    };
 
-    @action 
+    @action
     onBearingChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const bearing = parseInt(e.target.value);
-        if (!isNaN(bearing) && this._mapRef.current){
+        if (!isNaN(bearing) && this._mapRef.current) {
             const fixedBearing = Math.max(0, Math.min(360, bearing));
             this._mapRef.current.setBearing(fixedBearing);
             this.dataDoc.map_bearing = fixedBearing;
             this.mapboxMapViewState = {
                 ...this.mapboxMapViewState,
-                bearing: fixedBearing
-            }
+                bearing: fixedBearing,
+            };
         }
-    }
+    };
 
-    @action 
+    @action
     onPitchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const pitch = parseInt(e.target.value);
-        if (!isNaN(pitch) && this._mapRef.current){
+        if (!isNaN(pitch) && this._mapRef.current) {
             const fixedPitch = Math.max(0, Math.min(85, pitch));
             this._mapRef.current.setPitch(fixedPitch);
             this.dataDoc.map_pitch = fixedPitch;
             this.mapboxMapViewState = {
                 ...this.mapboxMapViewState,
-                pitch: fixedPitch
-            }
+                pitch: fixedPitch,
+            };
         }
-    }
+    };
 
-    @action 
+    @action
     onZoomChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const zoom = parseInt(e.target.value);
-        if (!isNaN(zoom) && this._mapRef.current){
+        if (!isNaN(zoom) && this._mapRef.current) {
             const fixedZoom = Math.max(0, Math.min(16, zoom));
             this._mapRef.current.setZoom(fixedZoom);
             this.dataDoc.map_zoom = fixedZoom;
             this.mapboxMapViewState = {
                 ...this.mapboxMapViewState,
-                zoom: fixedZoom
-            }
+                zoom: fixedZoom,
+            };
         }
-    }
+    };
 
     @action
     onStepZoomChange = (increment: boolean) => {
         if (this._mapRef.current) {
             let newZoom: number;
             if (increment) {
-                console.log('inc')
+                console.log('inc');
                 newZoom = this.mapboxMapViewState.zoom + 1;
-                
             } else {
-                console.log('dec')
+                console.log('dec');
                 newZoom = this.mapboxMapViewState.zoom - 1;
             }
             this._mapRef.current.setZoom(newZoom);
             this.dataDoc.map_zoom = newZoom;
             this.mapboxMapViewState = {
                 ...this.mapboxMapViewState,
-                zoom: increment ? Math.min(16, newZoom) : Math.max(0, newZoom)
-            }
+                zoom: increment ? Math.min(16, newZoom) : Math.max(0, newZoom),
+            };
         }
-        
-    }
-
+    };
 
     @action
     onMapMove = (e: ViewStateChangeEvent) => {
         this.mapboxMapViewState = e.viewState;
         this.dataDoc.longitude = e.viewState.longitude;
         this.dataDoc.latitude = e.viewState.latitude;
-    }
+    };
 
     @action
     toggleShowTerrain = () => {
         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;
-        
-    }
-
-
-
-
-
+    };
 
     static _firstRender = true;
     static _rerenderDelay = 500;
@@ -1662,7 +1568,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     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];
+        this.Document[DocCss];
         if (MapBox._rerenderDelay) {
             // prettier-ignore
             this._rerenderTimeout = this._rerenderTimeout ??
@@ -1671,12 +1577,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         MapBox._rerenderDelay = 0;
                     }
                     this._rerenderTimeout = undefined;
-                    this.rootDoc[DocCss] = this.rootDoc[DocCss] + 1;
+                    this.Document[DocCss] = this.Document[DocCss] + 1;
                 }), MapBox._rerenderDelay);
             return null;
         }
 
-        const scale = this.props.NativeDimScaling?.() || 1;
+        const scale = this._props.NativeDimScaling?.() || 1;
 
         const renderAnnotations = (childFilters?: () => string[]) => null;
         return (
@@ -1687,108 +1593,76 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     onPointerDown={async e => {
                         e.button === 0 && !e.ctrlKey && e.stopPropagation();
                     }}
-                    style={{ transformOrigin: "top left",  transform: `scale(${scale})`, width: `${100 / scale}%`, height: `${100 / scale}%`, pointerEvents: this.pointerEvents() }}>
+                    style={{ pointerEvents: this.pointerEvents() }}>
                     <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>
                     {renderAnnotations(this.opaqueFilter)}
-                    {SnappingManager.GetIsDragging() ? null : renderAnnotations()}
-                    {!this.routeToAnimate &&
+                    {SnappingManager.IsDragging ? null : renderAnnotations()}
+                    {!this.routeToAnimate && (
                         <div className="mapBox-searchbar">
-                            <TextField 
-                                fullWidth
-                                placeholder='Enter a location'
-                                onChange={(e) => this.handleSearchChange(e.target.value)}
-                            />
-                            <IconButton
-                                icon={<FontAwesomeIcon icon={faGear as IconLookup} size='1x'/>}
-                                type={Type.TERT}
-                                onClick={(e) => this.toggleSettings()}
-
-                            />
-                        </div> 
-                    }
-                    {this.settingsOpen && !this.routeToAnimate && 
-                        <div className='mapbox-settings-panel' style={{right: `${0+ this.sidebarWidth()}px`}}>
-                            <div className='mapbox-style-select'>
-                                <div>
-                                    Map Style:
-                                </div>
+                            <TextField fullWidth placeholder="Enter a location" onChange={(e: any) => this.handleSearchChange(e.target.value)} />
+                            <IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={e => this.toggleSettings()} />
+                        </div>
+                    )}
+                    {this.settingsOpen && !this.routeToAnimate && (
+                        <div className="mapbox-settings-panel" style={{ right: `${0 + this.sidebarWidth()}px` }}>
+                            <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>
+                                        <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>
                                 </div>
                             </div>
-                            <div className='mapbox-bearing-selection'>
+                            <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(2)} type="number" onChange={this.onBearingChange} />
                             </div>
-                            <div className='mapbox-pitch-selection'>
+                            <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(2)} type="number" onChange={this.onPitchChange} />
                             </div>
-                            <div className='mapbox-pitch-selection'>
+                            <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(2)} type="number" onChange={this.onZoomChange} />
                             </div>
-                            <div className='mapbox-terrain-selection'>
+                            <div className="mapbox-terrain-selection">
                                 <div>Show terrain: </div>
-                                <input 
-                                    type='checkbox'
-                                    checked={this.showTerrain}
-                                    onChange={this.toggleShowTerrain}
-                                    />
+                                <input type="checkbox" checked={this.showTerrain} onChange={this.toggleShowTerrain} />
                             </div>
                         </div>
-                    }
-                    {this.routeToAnimate &&
-                        <div className='animation-panel'>
-                            <div id='route-to-animate-title'>
-                                {StrCast(this.routeToAnimate.title)}
-                            </div>
-                            <div className='route-animation-options'>
-                                {this.getRouteAnimationOptions()}
-                            </div>
+                    )}
+                    {this.routeToAnimate && (
+                        <div className="animation-panel">
+                            <div id="route-to-animate-title">{StrCast(this.routeToAnimate.title)}</div>
+                            <div className="route-animation-options">{this.getRouteAnimationOptions()}</div>
                         </div>
-                    }
+                    )}
                     {this.featuresFromGeocodeResults.length > 0 && (
-                        <div className='mapbox-geocoding-search-results'>
+                        <div className="mapbox-geocoding-search-results">
                             <React.Fragment>
                                 <h4>Choose a location for your pin: </h4>
                                 {this.featuresFromGeocodeResults
                                     .filter(feature => feature.place_name)
                                     .map((feature, idx) => (
-                                    <div 
-                                        key={idx} 
-                                        className='search-result-container'
-                                        onClick={() => {
-                                            this.handleSearchChange("");
-                                            this.addMarkerForFeature(feature);
-                                        }}
-                                    >
-                                        <div className='search-result-place-name'> 
-                                        {feature.place_name}
+                                        <div
+                                            key={idx}
+                                            className="search-result-container"
+                                            onClick={() => {
+                                                this.handleSearchChange('');
+                                                this.addMarkerForFeature(feature);
+                                            }}>
+                                            <div className="search-result-place-name">{feature.place_name}</div>
                                         </div>
-                                    </div>
-                                ))}
+                                    ))}
                             </React.Fragment>
-                            
-                        </div>   
+                        </div>
                     )}
                     {/* <div className='zoom-box'>
                         <IconButton // increment 
@@ -1810,112 +1684,94 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             ref={this._mapRef}
                             mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
                             id="mapbox-map"
+                            viewState={{ ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width) / scale, height: NumCast(this.layoutDoc._height) / scale }}
                             mapStyle={this.dataDoc.map_style ? StrCast(this.dataDoc.map_style) : 'mapbox://styles/mapbox/streets-v11'}
-                            style={{height: NumCast(this.layoutDoc._height), width: NumCast(this.layoutDoc._width)}}
                             initialViewState={this.isAnimating ? undefined : this.mapboxMapViewState}
                             onMove={this.onMapMove}
                             onClick={this.handleMapClick}
                             onDblClick={this.handleMapDblClick}
-                            terrain={this.showTerrain ? { source: 'mapbox-dem', exaggeration: 2.0 } : undefined}
-                            
-                            
-                        >
-                            <Source
-                                id="mapbox-dem"
-                                type="raster-dem"
-                                url="mapbox://mapbox.mapbox-terrain-dem-v1"
-                                tileSize={512}
-                                maxzoom={14}
-                            />
-                            <Source id='temporary-route' type='geojson' data={this.temporaryRouteSource}/>
-                            <Source id='map-routes' type='geojson' data={this.allRoutesGeoJson}/>
-                            <Layer
-                                id='temporary-route-layer'
-                                type='line'
-                                source='temporary-route'
-                                layout={{"line-join": "round", "line-cap": "round"}}
-                                paint={{"line-color": "#36454F", "line-width": 4, "line-dasharray": [1,1]}}
-                                />
-                            {!this.isAnimating && this.animationPhase == 0 &&
-                            <Layer
-                                id='map-routes-layer'
-                                type='line'
-                                source='map-routes'
-                                layout={{"line-join": "round", "line-cap": "round"}}
-                                paint={{"line-color": "#FF0000", "line-width": 4}}
-                                />
-                            }
-                            {this.routeToAnimate && (this.isAnimating || this.animationPhase > 0) &&
+                            terrain={this.showTerrain ? { source: 'mapbox-dem', exaggeration: 2.0 } : undefined}>
+                            <Source id="mapbox-dem" type="raster-dem" url="mapbox://mapbox.mapbox-terrain-dem-v1" tileSize={512} maxzoom={14} />
+                            <Source id="temporary-route" type="geojson" data={this.temporaryRouteSource} />
+                            <Source id="map-routes" type="geojson" data={this.allRoutesGeoJson} />
+                            <Layer id="temporary-route-layer" type="line" source="temporary-route" layout={{ 'line-join': 'round', 'line-cap': 'round' }} paint={{ 'line-color': '#36454F', 'line-width': 4, 'line-dasharray': [1, 1] }} />
+                            {!this.isAnimating && this.animationPhase == 0 && <Layer id="map-routes-layer" type="line" source="map-routes" layout={{ 'line-join': 'round', 'line-cap': 'round' }} paint={{ 'line-color': '#FF0000', 'line-width': 4 }} />}
+                            {this.routeToAnimate && (this.isAnimating || this.animationPhase > 0) && (
                                 <>
-                                    {!this.isStreetViewAnimation &&
+                                    {!this.isStreetViewAnimation && (
                                         <>
-                                            <Source id='animated-route' type='geojson' data={this.updatedRouteCoordinates}/>
-                                            <Layer 
-                                            id='dynamic-animation-line' 
-                                            type='line' 
-                                            source='animated-route'
-                                            paint={{
-                                                'line-color': this.animationLineColor,
-                                                'line-width': 5,
-                                            }}
+                                            <Source id="animated-route" type="geojson" data={this.updatedRouteCoordinates} />
+                                            <Layer
+                                                id="dynamic-animation-line"
+                                                type="line"
+                                                source="animated-route"
+                                                paint={{
+                                                    'line-color': this.animationLineColor,
+                                                    'line-width': 5,
+                                                }}
                                             />
                                         </>
-                                        }
-                                    <Source id='start-pin-base' type='geojson' data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates[0], 0.04)}/>
-                                    <Source id='start-pin-top' type='geojson' data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates[0], 0.25)}/>
-                                    <Source id='end-pin-base' type='geojson' data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates.slice(-1)[0], 0.04)}/>
-                                    <Source id='end-pin-top' type='geojson' data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates.slice(-1)[0], 0.25)}/>
-                                    <Layer id='start-fill-pin-base' type='fill-extrusion' source='start-pin-base'
+                                    )}
+                                    <Source id="start-pin-base" type="geojson" data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates[0], 0.04)} />
+                                    <Source id="start-pin-top" type="geojson" data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates[0], 0.25)} />
+                                    <Source id="end-pin-base" type="geojson" data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates.slice(-1)[0], 0.04)} />
+                                    <Source id="end-pin-top" type="geojson" data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates.slice(-1)[0], 0.25)} />
+                                    <Layer
+                                        id="start-fill-pin-base"
+                                        type="fill-extrusion"
+                                        source="start-pin-base"
                                         paint={{
                                             'fill-extrusion-color': '#0bfc03',
-                                            'fill-extrusion-height': 1000
+                                            'fill-extrusion-height': 1000,
                                         }}
                                     />
-                                    <Layer id='start-fill-pin-top' type='fill-extrusion' source='start-pin-top'
+                                    <Layer
+                                        id="start-fill-pin-top"
+                                        type="fill-extrusion"
+                                        source="start-pin-top"
                                         paint={{
                                             'fill-extrusion-color': '#0bfc03',
                                             'fill-extrusion-base': 1000,
-                                            'fill-extrusion-height': 1200
+                                            'fill-extrusion-height': 1200,
                                         }}
                                     />
-                                    <Layer id='end-fill-pin-base' type='fill-extrusion' source='end-pin-base'
+                                    <Layer
+                                        id="end-fill-pin-base"
+                                        type="fill-extrusion"
+                                        source="end-pin-base"
                                         paint={{
                                             'fill-extrusion-color': '#eb1c1c',
-                                            'fill-extrusion-height': 1000
+                                            'fill-extrusion-height': 1000,
                                         }}
                                     />
-                                    <Layer id='end-fill-pin-top' type='fill-extrusion' source='end-pin-top'
+                                    <Layer
+                                        id="end-fill-pin-top"
+                                        type="fill-extrusion"
+                                        source="end-pin-top"
                                         paint={{
                                             'fill-extrusion-color': '#eb1c1c',
                                             'fill-extrusion-base': 1000,
-                                            'fill-extrusion-height': 1200
+                                            'fill-extrusion-height': 1200,
                                         }}
                                     />
-                                    
                                 </>
-                            }
-                            
+                            )}
 
                             <>
-                                {!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: MarkerEvent<mapboxgl.Marker, MouseEvent>) => this.handleMarkerClick(e, pushpin)}
-                                        >
-                                            {this.getMarkerIcon(pushpin)}
-                                        </Marker>
-                                ))}
+                                {!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: MarkerEvent<mapboxgl.Marker, MouseEvent>) => this.handleMarkerClick(e, pushpin)}>
+                                                {this.getMarkerIcon(pushpin)}
+                                            </Marker>
+                                        ))}
                             </>
-                            
+
                             {/* {this.mapMarkers.length > 0 && this.mapMarkers.map((marker, idx) => (
                                 <Marker key={idx} longitude={marker.longitude} latitude={marker.latitude}/>
                             ))} */}
-
                         </MapboxMap>
                     </MapProvider>
 
@@ -1935,8 +1791,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                                   .map((pushpin, i) => (
                                       <DocumentView
                                           key={i}
-                                          {...this.props}
-                                          renderDepth={this.props.renderDepth + 1}
+                                          {...this._props}
+                                          renderDepth={this._props.renderDepth + 1}
                                           Document={pushpin}
                                           DataDoc={undefined}
                                           PanelWidth={returnOne}
@@ -1960,7 +1816,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     </div> */}
                     {/* <MapBoxInfoWindow
                                     key={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})[Id]}
-                                    {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
+                                    {...OmitKeys(this._props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
                                     place={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})}
                                     markerMap={this.markerMap}
                                     PanelWidth={this.infoWidth}
@@ -1974,9 +1830,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 <div className="mapBox-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
                     <SidebarAnnos
                         ref={this._sidebarRef}
-                        {...this.props}
+                        {...this._props}
                         fieldKey={this.fieldKey}
-                        rootDoc={this.rootDoc}
+                        Document={this.Document}
                         layoutDoc={this.layoutDoc}
                         dataDoc={this.dataDoc}
                         usePanelWidth={true}
@@ -1995,7 +1851,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     }
 }
 
-{/* <Autocomplete
+{
+    /* <Autocomplete
                             fullWidth
                             id="map-location-searcher"
                             freeSolo
@@ -2014,8 +1871,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                                     placeholder='Enter a location'
                                 />
                             )}
-                            /> */}
-                        {/* <EditableText
+                            /> */
+}
+{
+    /* <EditableText
                             // editing
                             setVal={(newText: string | number) => typeof newText === 'string' && this.handleSearchChange(newText)}
                             // onEnter={e => this.bingSearch()}
@@ -2024,8 +1883,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             // placeholder={this.bingSearchBarContents || 'Enter a location'}
                             placeholder='Enter a location'
                             textAlign="center" 
-                        /> */}
-                        {/* <IconButton
+                        /> */
+}
+{
+    /* <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
@@ -2038,4 +1899,5 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         />
                         <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> */
+}
-- 
cgit v1.2.3-70-g09d2