overflow issue

5 files changed, 360 insertions, 232 deletions

diff --git a/maps.env b/maps.env
index 2b3b203e7..d475c04ad 100644
--- a/maps.env
+++ b/maps.env
@@ -1 +1 @@
-DASH_GOOGLE_MAPS_API_KEY=AIzaSyAdJkThRhSivFE-O1I6RHSmRBWGstLY_sI
\ No newline at end of file
+REACT_APP_DASH_GOOGLE_MAPS_API_KEY="AIzaSyALJU8DfCAqEAS0OqMDCmkE0otlz4H81fg"
diff --git a/package-lock.json b/package-lock.json
index 3637b14ac..9032ebba8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -370,6 +370,21 @@
                 "prop-types": "^15.7.2"
             }
         },
+        "@googlemaps/js-api-loader": {
+            "version": "1.11.4",
+            "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.11.4.tgz",
+            "integrity": "sha512-atFTSgEXXsE7mOsOIInUKG4JApu/NdyZR79Ed6jF92MjVQTcD6dz/Xo8djf4cIetnq4WYQmetem0d8/uS4o8oQ==",
+            "requires": {
+                "fast-deep-equal": "^3.1.3"
+            },
+            "dependencies": {
+                "fast-deep-equal": {
+                    "version": "3.1.3",
+                    "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+                    "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+                }
+            }
+        },
         "@hig/flyout": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/@hig/flyout/-/flyout-1.2.1.tgz",
@@ -417,6 +432,65 @@
             "resolved": "https://registry.npmjs.org/@log4js-node/log4js-api/-/log4js-api-1.0.2.tgz",
             "integrity": "sha512-6SJfx949YEWooh/CUPpJ+F491y4BYJmknz4hUN1+RHvKoUEynKbRmhnwbk/VLmh4OthLLDNCyWXfbh4DG1cTXA=="
         },
+        "@mapbox/geojson-rewind": {
+            "version": "0.5.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.1.tgz",
+            "integrity": "sha512-eL7fMmfTBKjrb+VFHXCGv9Ot0zc3C0U+CwXo1IrP+EPwDczLoXv34Tgq3y+2mPSFNVUXgU42ILWJTC7145KPTA==",
+            "requires": {
+                "get-stream": "^6.0.1",
+                "minimist": "^1.2.5"
+            },
+            "dependencies": {
+                "get-stream": {
+                    "version": "6.0.1",
+                    "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+                    "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
+                }
+            }
+        },
+        "@mapbox/geojson-types": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
+            "integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
+        },
+        "@mapbox/jsonlint-lines-primitives": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+            "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ="
+        },
+        "@mapbox/mapbox-gl-supported": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.0.tgz",
+            "integrity": "sha512-zu4udqYiBrKMQKwpKJ4hhPON7tz0QR/JZ3iGpHnNWFmH3Sv/ysxlICATUtGCFpsyJf2v1WpFhlzaZ3GhhKmPMA=="
+        },
+        "@mapbox/point-geometry": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+            "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
+        },
+        "@mapbox/tiny-sdf": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.2.5.tgz",
+            "integrity": "sha512-cD8A/zJlm6fdJOk6DqPUV8mcpyJkRz2x2R+/fYcWDYG3oWbG7/L7Yl/WqQ1VZCjnL9OTIMAn6c+BC5Eru4sQEw=="
+        },
+        "@mapbox/unitbezier": {
+            "version": "0.0.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+            "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
+        },
+        "@mapbox/vector-tile": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+            "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+            "requires": {
+                "@mapbox/point-geometry": "~0.1.0"
+            }
+        },
+        "@mapbox/whoots-js": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+            "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
+        },
         "@material-ui/core": {
             "version": "4.11.0",
             "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.0.tgz",
@@ -512,6 +586,27 @@
                 "react-is": "^16.8.0"
             }
         },
+        "@react-google-maps/api": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.2.0.tgz",
+            "integrity": "sha512-kMmzHyveLdEiLP+WN/H4vYEyaDTJn59mXj5Y0BxjJs5SIMhUtYxJ6EeJCV0aRSN+Gq5hYFLheBoy8Pfqtabq5g==",
+            "requires": {
+                "@googlemaps/js-api-loader": "1.11.4",
+                "@react-google-maps/infobox": "2.2.0",
+                "@react-google-maps/marker-clusterer": "2.2.0",
+                "invariant": "2.2.4"
+            }
+        },
+        "@react-google-maps/infobox": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.2.0.tgz",
+            "integrity": "sha512-nQbsPdcSTodXaaOgM9CaqyXytBkmollMuaYvERv5zxdoTWT1JvuViSaRbxpc3dYDsEHmp3myLx4ZbDcnOjf7Hg=="
+        },
+        "@react-google-maps/marker-clusterer": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.2.0.tgz",
+            "integrity": "sha512-QaQAfY/FdaSwPmm0JnW9AW+t0ocfUYmuso9WmeIMwTRCqcqNxc4GFe5uT0LDLmsYt/wxAeYoGWVaD8sd/Vquig=="
+        },
         "@react-three/fiber": {
             "version": "6.0.16",
             "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-6.0.16.tgz",
@@ -848,6 +943,11 @@
                 "@types/node": "*"
             }
         },
+        "@types/geojson": {
+            "version": "7946.0.7",
+            "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
+            "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ=="
+        },
         "@types/glob": {
             "version": "7.1.1",
             "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
@@ -911,6 +1011,23 @@
             "integrity": "sha512-Ft5BNFmv2pHDgxV5JDsndOWTRJ+56zte0ZpYLowp03tW+K+t8u8YMOzAnpuqPgzX6WO1XpDIUm7u04M8vdDiVQ==",
             "dev": true
         },
+        "@types/mapbox-gl": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-2.3.0.tgz",
+            "integrity": "sha512-Vf5f/jWOgSKbQCm1q0KA7n2DrHZHEWT1NvKuWZl5k7LTYaw8LkZXe9AatWD16t5pKFNBVRpg2VVNXX89d7hyPQ==",
+            "requires": {
+                "@types/geojson": "*"
+            }
+        },
+        "@types/mapbox__mapbox-gl-geocoder": {
+            "version": "4.7.0",
+            "resolved": "https://registry.npmjs.org/@types/mapbox__mapbox-gl-geocoder/-/mapbox__mapbox-gl-geocoder-4.7.0.tgz",
+            "integrity": "sha512-I2mPBvibX5F9bTfWpHLFpDhJjUXdCziBcV+1ZW5vADjPqXrP9ee8gvUgTlrbDx5nZ4JyWB6nbQ4U6um9NJZN3g==",
+            "requires": {
+                "@types/geojson": "*",
+                "@types/mapbox-gl": "*"
+            }
+        },
         "@types/memory-fs": {
             "version": "0.3.3",
             "resolved": "https://registry.npmjs.org/@types/memory-fs/-/memory-fs-0.3.3.tgz",
@@ -4694,6 +4811,11 @@
             "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
             "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg=="
         },
+        "csscolorparser": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+            "integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs="
+        },
         "cssesc": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5564,9 +5686,9 @@
             }
         },
         "dotenv": {
-            "version": "8.2.0",
-            "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
-            "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==",
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+            "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
             "dev": true
         },
         "double-bits": {
@@ -5617,6 +5739,11 @@
                 "xtend": "^4.0.0"
             }
         },
+        "earcut": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.2.tgz",
+            "integrity": "sha512-eZoZPPJcUHnfRZ0PjLvx2qBordSiO8ofC3vt+qACLM95u+4DovnbYNpQtJh0DNsWj8RnxrQytD4WA8gj5cRIaQ=="
+        },
         "ecc-jsbn": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -6970,6 +7097,11 @@
                 "json-bigint": "^0.3.0"
             }
         },
+        "geojson-vt": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+            "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+        },
         "get-caller-file": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -7018,6 +7150,11 @@
             "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
             "integrity": "sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4="
         },
+        "gl-matrix": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.3.0.tgz",
+            "integrity": "sha512-COb7LDz+SXaHtl/h4LeaFcNdJdAQSDeVqjiIihSXNrkWObZLhDI4hIkZC11Aeqp7bcE72clzB0BnDXr2SmslRA=="
+        },
         "glob": {
             "version": "7.1.6",
             "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -7228,6 +7365,11 @@
             "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
             "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
         },
+        "grid-index": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+            "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
+        },
         "growl": {
             "version": "1.10.5",
             "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz",
@@ -7998,6 +8140,14 @@
                 "math-codegen": "^0.3.5"
             }
         },
+        "invariant": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+            "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+            "requires": {
+                "loose-envify": "^1.0.0"
+            }
+        },
         "ip": {
             "version": "1.1.5",
             "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -8700,6 +8850,11 @@
             "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.3.1.tgz",
             "integrity": "sha512-l3hLhffs9zqoDe8zjmb/mAN4B8VT3L56EUvKNqLFVs9YlFA+zx7ke1DO8STAdDyYNkeSo1nKmjuvQeI12So8Xw=="
         },
+        "kdbush": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
+            "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
+        },
         "keycode": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
@@ -9134,6 +9289,36 @@
                 "object-visit": "^1.0.0"
             }
         },
+        "mapbox-gl": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.3.1.tgz",
+            "integrity": "sha512-xGohzbxxdN3UhHMHy0aweaueYwSoOspSg90gi1T7DIl8Ev0YLjl+ApV6VYtNnR1B9lmwDn8jITfG6Y2JiSEuwg==",
+            "requires": {
+                "@mapbox/geojson-rewind": "^0.5.0",
+                "@mapbox/geojson-types": "^1.0.2",
+                "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+                "@mapbox/mapbox-gl-supported": "^2.0.0",
+                "@mapbox/point-geometry": "^0.1.0",
+                "@mapbox/tiny-sdf": "^1.2.5",
+                "@mapbox/unitbezier": "^0.0.0",
+                "@mapbox/vector-tile": "^1.3.1",
+                "@mapbox/whoots-js": "^3.1.0",
+                "csscolorparser": "~1.0.3",
+                "earcut": "^2.2.2",
+                "geojson-vt": "^3.2.1",
+                "gl-matrix": "^3.3.0",
+                "grid-index": "^1.1.0",
+                "minimist": "^1.2.5",
+                "murmurhash-js": "^1.0.0",
+                "pbf": "^3.2.1",
+                "potpack": "^1.0.1",
+                "quickselect": "^2.0.0",
+                "rw": "^1.3.3",
+                "supercluster": "^7.1.3",
+                "tinyqueue": "^2.0.3",
+                "vt-pbf": "^3.1.1"
+            }
+        },
         "material-colors": {
             "version": "1.2.6",
             "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
@@ -9740,6 +9925,11 @@
             "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
             "dev": true
         },
+        "murmurhash-js": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+            "integrity": "sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E="
+        },
         "nan": {
             "version": "2.14.1",
             "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
@@ -13789,6 +13979,15 @@
             "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
             "integrity": "sha1-HUCLP9t2kjuVQ9lvtMnf1TXZy10="
         },
+        "pbf": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+            "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+            "requires": {
+                "ieee754": "^1.1.12",
+                "resolve-protobuf-schema": "^2.1.0"
+            }
+        },
         "pbkdf2": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
@@ -14067,6 +14266,11 @@
             "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
             "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
         },
+        "potpack": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.1.tgz",
+            "integrity": "sha512-15vItUAbViaYrmaB/Pbw7z6qX2xENbFSTA7Ii4tgbPtasxm5v6ryKhKtL91tpWovDJzTiZqdwzhcFBCwiMVdVw=="
+        },
         "prebuild-install": {
             "version": "5.3.3",
             "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-5.3.3.tgz",
@@ -14267,6 +14471,11 @@
                 "prosemirror-transform": "^1.1.0"
             }
         },
+        "protocol-buffers-schema": {
+            "version": "3.5.1",
+            "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.5.1.tgz",
+            "integrity": "sha512-YVCvdhxWNDP8/nJDyXLuM+UFsuPk4+1PB7WGPVDzm3HTHbzFLxQYeW2iZpS4mmnXrQJGBzt230t/BbEb7PrQaw=="
+        },
         "proxy-addr": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -14564,6 +14773,11 @@
             "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==",
             "dev": true
         },
+        "quickselect": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+            "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+        },
         "raf-schd": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.2.tgz",
@@ -15474,6 +15688,14 @@
             "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
             "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
         },
+        "resolve-protobuf-schema": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+            "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+            "requires": {
+                "protocol-buffers-schema": "^3.3.1"
+            }
+        },
         "resolve-url": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -15543,6 +15765,11 @@
                 "aproba": "^1.1.1"
             }
         },
+        "rw": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+            "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+        },
         "safe-buffer": {
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -16868,6 +17095,14 @@
             "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
             "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
         },
+        "supercluster": {
+            "version": "7.1.3",
+            "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.3.tgz",
+            "integrity": "sha512-7+bR4FbF5SYsmkHfDp61QiwCKtwNDyPsddk9TzfsDA5DQr5Goii5CVD2SXjglweFCxjrzVZf945ahqYfUIk8UA==",
+            "requires": {
+                "kdbush": "^3.0.0"
+            }
+        },
         "supports-color": {
             "version": "5.5.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -17188,6 +17423,11 @@
             "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
             "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
         },
+        "tinyqueue": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+            "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+        },
         "to-array": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
@@ -18227,6 +18467,16 @@
             "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-1.0.8.tgz",
             "integrity": "sha512-obtSWTlbJ+a+TFRYGaUumtVwb+InIUVI0Lu0VBUAPmj2cU5JutEXg3xUE0c2J5Tcy7h2DEKVJBFi+Y9ZSFzzPQ=="
         },
+        "vt-pbf": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+            "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+            "requires": {
+                "@mapbox/point-geometry": "0.1.0",
+                "@mapbox/vector-tile": "^1.3.1",
+                "pbf": "^3.2.1"
+            }
+        },
         "vue-template-compiler": {
             "version": "2.6.11",
             "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
diff --git a/package.json b/package.json
index 6cbde9e1f..9df32995c 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
         "copy-webpack-plugin": "^4.6.0",
         "cross-env": "^5.2.1",
         "css-loader": "^2.1.1",
-        "dotenv": "^8.2.0",
+        "dotenv": "^8.6.0",
         "file-loader": "^3.0.1",
         "fork-ts-checker-webpack-plugin": "^1.6.0",
         "jsdom": "^15.2.1",
@@ -125,6 +125,7 @@
         "@hig/theme-context": "^2.1.3",
         "@hig/theme-data": "^2.16.1",
         "@material-ui/core": "^4.11.0",
+        "@react-google-maps/api": "^2.2.0",
         "@react-three/fiber": "^6.0.16",
         "@types/cors": "^2.8.8",
         "@types/d3-axis": "^2.0.0",
@@ -132,6 +133,8 @@
         "@types/d3-scale": "^3.2.2",
         "@types/d3-selection": "^2.0.0",
         "@types/google-maps": "^3.2.2",
+        "@types/mapbox-gl": "^2.3.0",
+        "@types/mapbox__mapbox-gl-geocoder": "^4.7.0",
         "@types/react-reconciler": "^0.26.1",
         "@types/reveal": "^3.3.33",
         "@types/three": "^0.126.2",
@@ -191,6 +194,7 @@
         "jszip": "^3.5.0",
         "libxmljs": "^0.19.7",
         "lodash": "^4.17.15",
+        "mapbox-gl": "^2.3.1",
         "material-ui": "^0.20.2",
         "mobile-detect": "^1.4.4",
         "mobx": "^5.15.7",
diff --git a/src/client/views/collections/CollectionMapView.scss b/src/client/views/collections/CollectionMapView.scss
index 870b7fda8..e87c02611 100644
--- a/src/client/views/collections/CollectionMapView.scss
+++ b/src/client/views/collections/CollectionMapView.scss
@@ -1,6 +1,7 @@
 .collectionMapView {
     width: 100%;
     height: 100%;
+    overflow: hidden;
 
     .collectionMapView-contents {
         width: 100%;
@@ -8,6 +9,16 @@
         > div {
             position: unset !important; // when the sidebar filter flys out, this prevents the map from extending outside the document box
         }
+
+        .dash-label {
+            position: absolute;
+            top: 1rem;
+            left: 5rem;
+            color: black;
+            z-index: 10;
+            margin: 0;
+            padding: 0;
+        }
     }
 }
 
@@ -27,4 +38,4 @@
         width: 50px;
         height: 50px;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx
index 2d7569d45..2203176de 100644
--- a/src/client/views/collections/CollectionMapView.tsx
+++ b/src/client/views/collections/CollectionMapView.tsx
@@ -1,4 +1,4 @@
-import { GoogleApiWrapper, IMapProps, Map as GeoMap, Marker } from "google-maps-react";
+import { GoogleMap, Marker, InfoWindow, LoadScript, GoogleMapProps } from '@react-google-maps/api';
 import { action, computed, Lambda, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCast, Field, FieldResult, Opt } from "../../../fields/Doc";
@@ -22,248 +22,111 @@ export type LocationData = google.maps.LatLngLiteral & {
     zoom?: number;
 };
 
-interface DocLatLng {
-    lat: FieldResult<Field>;
-    lng: FieldResult<Field>;
-}
-
-// Nowhere, Oklahoma
-const defaultLocation = { lat: 35.1592238, lng: -98.444512, zoom: 15 };
-const noResults = "ZERO_RESULTS";
-
-const query = async (data: string | google.maps.LatLngLiteral) => {
-    const contents = typeof data === "string" ? `address=${data.replace(/\s+/g, "+")}` : `latlng=${data.lat},${data.lng}`;
-    const target = `https://maps.googleapis.com/maps/api/geocode/json?${contents}&key=${process.env.GOOGLE_MAPS_GEO}`;
-    try {
-        return JSON.parse(await requestPromise.get(target));
-    } catch {
-        return undefined;
-    }
+const mapContainerStyle = {
+    width: '100%',
+    heiht: '100%',
+    overflow: 'hidden',
 };
 
-@observer
-export class CollectionMapView extends CollectionSubView<MapSchema, Partial<IMapProps> & { google: any }>(MapSchema) {
-
-    private _cancelAddrReq = new Map<string, boolean>();
-    private _cancelLocReq = new Map<string, boolean>();
-    private _initialLookupPending = new Map<string, boolean>();
-    private responders: { locationDisposer: Lambda, addressDisposer: Lambda }[] = [];
 
-    /**
-     * Note that all the uses of runInAction below are not included
-     * as a way to update observables (documents handle this already
-     * in their property setters), but rather to create a single bulk
-     * update and thus prevent uneeded invocations of the location-
-     * and address–updating reactions. 
-     */
-
-    private getLocation = (doc: Opt<Doc>, fieldKey: string, returnDefault: boolean = true): Opt<LocationData> => {
-        if (doc) {
-            const titleLoc = StrCast(doc.title).startsWith("@") ? StrCast(doc.title).substring(1) : undefined;
-            const lat = Cast(doc[`${fieldKey}-lat`], "number", null) || (Cast(doc[`${fieldKey}-lat`], "string", null) && Number(Cast(doc[`${fieldKey}-lat`], "string", null))) || undefined;
-            const lng = Cast(doc[`${fieldKey}-lng`], "number", null) || (Cast(doc[`${fieldKey}-lng`], "string", null) && Number(Cast(doc[`${fieldKey}-lng`], "string", null))) || undefined;
-            const zoom = Cast(doc[`${fieldKey}-zoom`], "number", null) || (Cast(doc[`${fieldKey}-zoom`], "string", null) && Number(Cast(doc[`${fieldKey}-zoom`], "string", null))) || undefined;
-            const address = titleLoc || StrCast(doc[`${fieldKey}-address`], StrCast(doc.title).replace(/^-/, ""));
-            if (titleLoc || (address && (lat === undefined || lng === undefined))) {
-                const id = doc[Id];
-                if (!this._initialLookupPending.get(id)) {
-                    this._initialLookupPending.set(id, true);
-                    setTimeout(() => {
-                        titleLoc && Doc.SetInPlace(doc, `${fieldKey}-address`, titleLoc, true);
-                        this.respondToAddressChange(doc, fieldKey, address).then(() => this._initialLookupPending.delete(id));
-                    });
-                }
-            }
-            return (lat === undefined || lng === undefined) ? (returnDefault ? defaultLocation : undefined) : { lat, lng, zoom };
-        }
-        return undefined;
-    }
+const defaultCenter = {
+    lat: 0,
+    lng: 0,
+}
+//-----------------------------test map marker-----------------------------------
+// const map = new google.maps.Map(document.getElementById('map')!, {
+//     zoom: 10,
+//     center: new google.maps.LatLng(-33.92, 151.25),
+//     mapTypeId: google.maps.MapTypeId.ROADMAP
+// });
+
+// // test display markers
+// let locations = [
+//     ['Bondi Beach', -33.890542, 151.274856, 4],
+//     ['Coogee Beach', -33.923036, 151.259052, 5],
+//     ['Cronulla Beach', -34.028249, 151.157507, 3],
+//     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
+//     ['Maroubra Beach', -33.950198, 151.259302, 1]
+// ];
+
+// const infowindow = new google.maps.InfoWindow();
+// let marker: google.maps.Marker
+// let i: number
+
+// for (i = 0; i < locations.length; i++) {
+//     marker = new google.maps.Marker({
+//         position: new google.maps.LatLng(locations[i][1] as number, locations[i][2] as number),
+//         map: map
+//     });
+
+//     google.maps.event.addListener(marker, 'click', (function (marker, i) {
+//         return function () {
+//             infowindow.setContent(locations[i][0] as string);
+//             infowindow.open(map, marker);
+//         }
+//     })(marker, i));
+// }
+
+//----------------------------------------------------------------
 
-    private markerClick = async (layout: Doc, { lat, lng, zoom }: LocationData) => {
-        const batch = UndoManager.StartBatch("marker click");
-        const { fieldKey } = this.props;
-        runInAction(() => {
-            this.layoutDoc[`${fieldKey}-mapCenter-lat`] = lat;
-            this.layoutDoc[`${fieldKey}-mapCenter-lng`] = lng;
-            zoom && (this.layoutDoc[`${fieldKey}-mapCenter-zoom`] = zoom);
-        });
-        if (layout.isLinkButton && DocListCast(layout.links).length) {
-            await LinkManager.traverseLink(undefined, layout, (doc: Doc, where: string, finished?: () => void) => {
-                this.props.addDocTab(doc, where);
-                finished?.();
-            }, false, this.props.ContainingCollectionDoc, batch.end, undefined);
-        } else {
-            ScriptCast(layout.onClick)?.script.run({ this: layout, self: Cast(layout.rootDocument, Doc, null) || layout });
-            batch.end();
-        }
-    }
+@observer
+export default class CollectionMapView extends CollectionSubView<MapSchema, GoogleMapProps>(MapSchema) {
 
-    private renderMarkerIcon = (layout: Doc) => {
-        const { Document } = this.props;
-        const fieldKey = Doc.LayoutFieldKey(layout);
-        const iconUrl = StrCast(layout.mapIconUrl, StrCast(Document.mapIconUrl));
-        if (iconUrl) {
-            const iconWidth = NumCast(layout[`${fieldKey}-iconWidth`], 45);
-            const iconHeight = NumCast(layout[`${fieldKey}-iconHeight`], 45);
-            const iconSize = new google.maps.Size(iconWidth, iconHeight);
-            return {
-                size: iconSize,
-                scaledSize: iconSize,
-                url: iconUrl
-            };
-        }
-    }
 
-    private renderMarker = (layout: Doc, fieldKey?: string) => {
-        const location = this.getLocation(layout, fieldKey || Doc.LayoutFieldKey(layout));
-        return !location ? (null) :
-            <Marker
-                key={layout[Id]}
-                label={StrCast(layout[`${this.props.fieldKey}-address`])}
-                position={location}
-                onClick={() => this.markerClick(layout, location)}
-                icon={this.renderMarkerIcon(layout)}
-            />;
-    }
+    render() {
+        const { childLayoutPairs } = this;
+        const { Document, fieldKey, isContentActive: active } = this.props;
 
-    private respondToAddressChange = async (doc: Doc, fieldKey: string, newAddress: string, oldAddress?: string) => {
-        if (newAddress === oldAddress) {
-            return false;
-        }
-        const response = await query(newAddress);
-        const id = doc[Id];
-        if (!response || response.status === noResults) {
-            this._cancelAddrReq.set(id, true);
-            doc[`${fieldKey}-address`] = oldAddress;
-            return false;
-        }
-        const { geometry, formatted_address } = response.results[0];
-        const { lat, lng } = geometry.location;
-        runInAction(() => {
-            if (doc[`${fieldKey}-lat`] !== lat || doc[`${fieldKey}-lng`] !== lng) {
-                this._cancelLocReq.set(id, true);
-                Doc.SetInPlace(doc, `${fieldKey}-lat`, lat, true);
-                Doc.SetInPlace(doc, `${fieldKey}-lng`, lng, true);
-            }
-            if (formatted_address !== newAddress) {
-                this._cancelAddrReq.set(id, true);
-                Doc.SetInPlace(doc, `${fieldKey}-address`, formatted_address, true);
-            }
-        });
-        return true;
-    }
+        // const { isLoaded, loadError } = useLoadScript({
+        //     googleMapsApiKey: 'AIzaSyALJU8DfCAqEAS0OqMDCmkE0otlz4H81fg',
+        //     libraries: ['places']
+        // })
 
-    private respondToLocationChange = async (doc: Doc, fieldKey: string, newLatLng: DocLatLng, oldLatLng: Opt<DocLatLng>) => {
-        if (newLatLng === oldLatLng) {
-            return false;
-        }
-        const response = await query({ lat: NumCast(newLatLng.lat), lng: NumCast(newLatLng.lng) });
-        const id = doc[Id];
-        if (!response || response.status === noResults) {
-            this._cancelLocReq.set(id, true);
-            runInAction(() => {
-                doc[`${fieldKey}-lat`] = oldLatLng?.lat;
-                doc[`${fieldKey}-lng`] = oldLatLng?.lng;
-            });
-            return false;
-        }
-        const { formatted_address } = response.results[0];
-        if (formatted_address !== doc[`${fieldKey}-address`]) {
-            this._cancelAddrReq.set(doc[Id], true);
-            Doc.SetInPlace(doc, `${fieldKey}-address`, formatted_address, true);
-        }
-        return true;
-    }
+        // if (loadError) return "Error loading maps";
+        // if (!isLoaded) return "Loading Maps";
 
-    @computed get reactiveContents() {
-        this.responders.forEach(({ locationDisposer, addressDisposer }) => {
-            locationDisposer();
-            addressDisposer();
-        });
-        this.responders = [];
-        return this.childLayoutPairs.map(({ layout }) => {
-            const fieldKey = Doc.LayoutFieldKey(layout);
-            const id = layout[Id];
-            this.responders.push({
-                locationDisposer: computed(() => ({ lat: layout[`${fieldKey}-lat`], lng: layout[`${fieldKey}-lng`] }))
-                    .observe(({ oldValue, newValue }) => {
-                        if (this._cancelLocReq.get(id)) {
-                            this._cancelLocReq.set(id, false);
-                        } else if (newValue.lat !== undefined && newValue.lng !== undefined) {
-                            this.respondToLocationChange(layout, fieldKey, newValue, oldValue);
-                        }
-                    }),
-                addressDisposer: computed(() => Cast(layout[`${fieldKey}-address`], "string", null))
-                    .observe(({ oldValue, newValue }) => {
-                        if (this._cancelAddrReq.get(id)) {
-                            this._cancelAddrReq.set(id, false);
-                        } else if (newValue?.length) {
-                            this.respondToAddressChange(layout, fieldKey, newValue, oldValue);
-                        }
-                    })
-            });
-            return this.renderMarker(layout);
-        });
-    }
 
-    render() {
-        const { childLayoutPairs } = this;
-        const { Document, fieldKey, isContentActive: active, google } = this.props;
-        const mapLoc = this.getLocation(this.rootDoc, `${fieldKey}-mapCenter`, false);
-        let center = mapLoc;
-        if (center === undefined) {
-            const childLocations = childLayoutPairs.map(({ layout }) => this.getLocation(layout, Doc.LayoutFieldKey(layout), false));
-            center = childLocations.find(location => location) || defaultLocation;
-        }
         return <div className="collectionMapView" ref={this.createDashEventsTarget}>
+
             <div className={"collectionMapView-contents"}
-                style={{ pointerEvents: active() ? undefined : "none" }}
+                style={{ pointerEvents: active() ? undefined : "none", overflow: 'hidden' }}
                 onWheel={e => e.stopPropagation()}
                 onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} >
-                <GeoMap
-                    google={google}
-                    zoom={center.zoom || 10}
-                    initialCenter={center}
-                    center={center}
-                    onIdle={(_props?: IMapProps, map?: google.maps.Map) => {
-                        if (this.layoutDoc._lockedTransform) {
-                            // reset zoom (ideally, we could probably can tell the map to disallow zooming somehow instead)
-                            map?.setZoom(center?.zoom || 10);
-                            map?.setCenter({ lat: center?.lat!, lng: center?.lng! });
-                        } else {
-                            const zoom = map?.getZoom();
-                            (center?.zoom !== zoom) && undoBatch(action(() => {
-                                Document[`${fieldKey}-mapCenter-zoom`] = zoom;
-                            }))();
-                        }
-                    }}
-                    onDragend={(_props?: IMapProps, map?: google.maps.Map) => {
-                        if (this.layoutDoc._lockedTransform) {
-                            // reset the drag (ideally, we could probably can tell the map to disallow dragging somehow instead)
-                            map?.setCenter({ lat: center?.lat!, lng: center?.lng! });
-                        } else {
-                            undoBatch(action(({ lat, lng }) => {
-                                Document[`${fieldKey}-mapCenter-lat`] = lat();
-                                Document[`${fieldKey}-mapCenter-lng`] = lng();
-                            }))(map?.getCenter());
-                        }
-                    }}
+                <h1 className="dash-label">
+                    Dash!
+                </h1>
+                <LoadScript
+                    // googleMapsApiKey='AIzaSyALJU8DfCAqEAS0OqMDCmkE0otlz4H81fg'
+                    googleMapsApiKey={process.env.REACT_APP_DASH_GOOGLE_MAPS_API_KEY!}
+                    libraries={['places']}
                 >
-                    {this.reactiveContents}
-                    {mapLoc && StrCast(this.rootDoc[`${fieldKey}-mapCenter-address`]) ? this.renderMarker(this.rootDoc, `${fieldKey}-mapCenter`) : undefined}
-                </GeoMap>
+                    <GoogleMap
+                        mapContainerStyle={mapContainerStyle}
+                        zoom={5}
+                        center={defaultCenter}
+                    >
+                        <Marker
+                            // name={'SOMA'}
+                            position={{ lat: 37.778519, lng: -122.405640 }} />
+                        <Marker
+                            // name={'Dolores park'}
+                            position={{ lat: 47.617701, lng: -122.359485 }} />
+
+                    </GoogleMap>
+                </LoadScript >
             </div>
-        </div>;
+        </div >;
     }
 
 }
 
-export default GoogleApiWrapper({
-    apiKey: process.env.GOOGLE_MAPS!,
-    LoadingContainer: () => {
-        console.log(process.env.GOOGLE_MAPS);
-        return <div className={"loadingWrapper"}>
-            <img className={"loadingGif"} src={"/assets/loading.gif"} />
-        </div>;
-    }
-})(CollectionMapView) as any;
\ No newline at end of file
+// export default GoogleApiWrapper({
+//     // apiKey: process.env.REACT_APP_DASH_GOOGLE_MAPS_API_KEY!,
+//     apiKey: 'AIzaSyALJU8DfCAqEAS0OqMDCmkE0otlz4H81fg',
+//     LoadingContainer: () => {
+//         console.log(process.env.REACT_APP_DASH_GOOGLE_MAPS_API_KEY);
+//         return <div className={"loadingWrapper"}>
+//             <img className={"loadingGif"} src={"/assets/loading.gif"} />
+//         </div>;
+//     }
+// })(CollectionMapView) as any;
\ No newline at end of file