mapbox cleanup

5 files changed, 127 insertions, 342 deletions

diff --git a/package-lock.json b/package-lock.json
index 288247869..bbc5dc95c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -385,9 +385,9 @@
             }
         },
         "@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==",
+            "version": "1.12.8",
+            "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.12.8.tgz",
+            "integrity": "sha512-h1RNVIJkHWL4UrdJo8fwECJwSRg8CSIfTEtPdzvThcji7tAPvVBDVBPzvPKhvl8e8mWEGPhnYOt6kPfSxJL+vQ==",
             "requires": {
                 "fast-deep-equal": "^3.1.3"
             },
@@ -399,6 +399,24 @@
                 }
             }
         },
+        "@googlemaps/markerclusterer": {
+            "version": "1.0.12",
+            "resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-1.0.12.tgz",
+            "integrity": "sha512-DSmN2w1ZoI+PBWfNCKYcr+zalP0uaaKIU08+UgebJYZ96X+J6CdUpD+xOVwBV1OJDiIXkneHquOZnT+V6dm+Sg==",
+            "requires": {
+                "@turf/clusters-dbscan": "^6.4.0",
+                "@turf/clusters-kmeans": "^6.4.0",
+                "fast-deep-equal": "^3.1.3",
+                "supercluster": "^7.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",
@@ -542,25 +560,27 @@
             }
         },
         "@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",
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.7.0.tgz",
+            "integrity": "sha512-Fb/l7aR69ObYvzhpt1d1931454ylRkTPKF1C8GfLvXtg19wc36zTev2Afbahd+qAdyKuQyDdf5/SQyMjYBHI/A==",
+            "requires": {
+                "@googlemaps/js-api-loader": "1.12.8",
+                "@googlemaps/markerclusterer": "1.0.12",
+                "@react-google-maps/infobox": "2.6.0",
+                "@react-google-maps/marker-clusterer": "2.6.0",
+                "@types/google.maps": "3.46.1",
                 "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=="
+            "version": "2.6.0",
+            "resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.6.0.tgz",
+            "integrity": "sha512-2dXVZsuZ2PjelVg+slpUSYPnvoSIySwf4P/wScGijjqu6bpvhyX9AivitsF7zHfbwnZ0gAPX1Q8xtQhKgawkEg=="
         },
         "@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=="
+            "version": "2.6.0",
+            "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.6.0.tgz",
+            "integrity": "sha512-EjeoCM+U/6W9qoGWqurcDbCubqTEDTFET7Jd3XcLHqTLvFAE473x2YbQg98mJXKNgPKcPTNEcTiYYGiIz9tEjA=="
         },
         "@react-three/fiber": {
             "version": "6.0.16",
@@ -606,6 +626,68 @@
                 "unicode-trie": "^0.3.0"
             }
         },
+        "@turf/clone": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/@turf/clone/-/clone-6.5.0.tgz",
+            "integrity": "sha512-mzVtTFj/QycXOn6ig+annKrM6ZlimreKYz6f/GSERytOpgzodbQyOgkfwru100O1KQhhjSudKK4DsQ0oyi9cTw==",
+            "requires": {
+                "@turf/helpers": "^6.5.0"
+            }
+        },
+        "@turf/clusters-dbscan": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/@turf/clusters-dbscan/-/clusters-dbscan-6.5.0.tgz",
+            "integrity": "sha512-SxZEE4kADU9DqLRiT53QZBBhu8EP9skviSyl+FGj08Y01xfICM/RR9ACUdM0aEQimhpu+ZpRVcUK+2jtiCGrYQ==",
+            "requires": {
+                "@turf/clone": "^6.5.0",
+                "@turf/distance": "^6.5.0",
+                "@turf/helpers": "^6.5.0",
+                "@turf/meta": "^6.5.0",
+                "density-clustering": "1.3.0"
+            }
+        },
+        "@turf/clusters-kmeans": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/@turf/clusters-kmeans/-/clusters-kmeans-6.5.0.tgz",
+            "integrity": "sha512-DwacD5+YO8kwDPKaXwT9DV46tMBVNsbi1IzdajZu1JDSWoN7yc7N9Qt88oi+p30583O0UPVkAK+A10WAQv4mUw==",
+            "requires": {
+                "@turf/clone": "^6.5.0",
+                "@turf/helpers": "^6.5.0",
+                "@turf/invariant": "^6.5.0",
+                "@turf/meta": "^6.5.0",
+                "skmeans": "0.9.7"
+            }
+        },
+        "@turf/distance": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/@turf/distance/-/distance-6.5.0.tgz",
+            "integrity": "sha512-xzykSLfoURec5qvQJcfifw/1mJa+5UwByZZ5TZ8iaqjGYN0vomhV9aiSLeYdUGtYRESZ+DYC/OzY+4RclZYgMg==",
+            "requires": {
+                "@turf/helpers": "^6.5.0",
+                "@turf/invariant": "^6.5.0"
+            }
+        },
+        "@turf/helpers": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-6.5.0.tgz",
+            "integrity": "sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw=="
+        },
+        "@turf/invariant": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-6.5.0.tgz",
+            "integrity": "sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==",
+            "requires": {
+                "@turf/helpers": "^6.5.0"
+            }
+        },
+        "@turf/meta": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
+            "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
+            "requires": {
+                "@turf/helpers": "^6.5.0"
+            }
+        },
         "@types/adm-zip": {
             "version": "0.4.33",
             "resolved": "https://registry.npmjs.org/@types/adm-zip/-/adm-zip-0.4.33.tgz",
@@ -931,6 +1013,11 @@
                 "google-maps-react": "*"
             }
         },
+        "@types/google.maps": {
+            "version": "3.46.1",
+            "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.46.1.tgz",
+            "integrity": "sha512-GAa5ZWYgXG50yLXybb7A824esGm/L0LKHS7qD0qkP0IA/Qp5r922P9tmYcbCkGEf3Zgf7Ukbp7l08/IGIJuQwQ=="
+        },
         "@types/googlemaps": {
             "version": "3.39.8",
             "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.39.8.tgz",
@@ -5217,6 +5304,11 @@
             "resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz",
             "integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ=="
         },
+        "density-clustering": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/density-clustering/-/density-clustering-1.3.0.tgz",
+            "integrity": "sha1-3J9ZyPCrl+FiSsZJMP0xlIF9ysU="
+        },
         "depcheck": {
             "version": "0.9.2",
             "resolved": "https://registry.npmjs.org/depcheck/-/depcheck-0.9.2.tgz",
@@ -8773,6 +8865,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",
@@ -16115,6 +16212,11 @@
                 }
             }
         },
+        "skmeans": {
+            "version": "0.9.7",
+            "resolved": "https://registry.npmjs.org/skmeans/-/skmeans-0.9.7.tgz",
+            "integrity": "sha512-hNj1/oZ7ygsfmPZ7ZfN5MUBRoGg1gtpnImuJBgLO0ljQ67DtJuiQaiYdS4lUA6s0KCwnPhGivtC/WRwIZLkHyg=="
+        },
         "slash": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
@@ -16946,6 +17048,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.4",
+            "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.4.tgz",
+            "integrity": "sha512-GhKkRM1jMR6WUwGPw05fs66pOFWhf59lXq+Q3J3SxPvhNcmgOtLRV6aVQPMRsmXdpaeFJGivt+t7QXUPL3ff4g==",
+            "requires": {
+                "kdbush": "^3.0.0"
+            }
+        },
         "supports-color": {
             "version": "5.5.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index 40504b9d8..810d0a026 100644
--- a/package.json
+++ b/package.json
@@ -125,7 +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-google-maps/api": "^2.7.0",
         "@react-three/fiber": "^6.0.16",
         "@types/bezier-js": "^4.1.0",
         "@types/cors": "^2.8.8",
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index a7ca57b0b..958ba62f7 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -25,7 +25,6 @@ import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
 import { CollectionGridView } from './collectionGrid/CollectionGridView';
 import { CollectionLinearView } from './collectionLinear';
-import CollectionMapView from './MapView/CollectionMapView';
 import { CollectionMulticolumnView } from './collectionMulticolumn/CollectionMulticolumnView';
 import { CollectionMultirowView } from './collectionMulticolumn/CollectionMultirowView';
 import { CollectionPileView } from './CollectionPileView';
@@ -142,7 +141,6 @@ export class CollectionView extends ViewBoxAnnotatableComponent<ViewBoxAnnotatab
             case CollectionViewType.Stacking: return <CollectionStackingView key="collview" {...props} />;
             case CollectionViewType.Masonry: return <CollectionStackingView key="collview" {...props} />;
             case CollectionViewType.Time: return <CollectionTimeView key="collview" {...props} />;
-            case CollectionViewType.Map: return <CollectionMapView key="collview" {...props} />;
             case CollectionViewType.Grid: return <CollectionGridView key="collview" {...props} />;
             //case CollectionViewType.Staff: return <CollectionStaffView key="collview" {...props} />;
         }
diff --git a/src/client/views/collections/MapView/CollectionMapView.scss b/src/client/views/collections/MapView/CollectionMapView.scss
deleted file mode 100644
index 0dc226c04..000000000
--- a/src/client/views/collections/MapView/CollectionMapView.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.collectionMapView {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-
-    .collectionMapView-contents {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        > div {
-            position: unset !important; // when the sidebar filter flys out, this prevents the map from extending outside the document box
-        }
-
-        .map-wrapper {
-            .searchbox {
-                box-sizing: border-box;
-                border: 1px solid transparent;
-                width: 300px;
-                height: 32px;
-                padding: 0 12px;
-                border-radius: 3px;
-                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-                font-size: 14px;
-                outline: none;
-                text-overflow: ellipses;
-                position: absolute;
-                left: 50%;
-                margin-left: -120px;
-                margin-top: 5px;
-            }
-        }
-    }
-}
-
-.loadingWrapper {
-    width: 100%;
-    height: 100%;
-    background-color: pink;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-
-    .loadingGif {
-        align-self: center;
-        justify-self: center;
-        width: 50px;
-        height: 50px;
-    }
-}
diff --git a/src/client/views/collections/MapView/CollectionMapView.tsx b/src/client/views/collections/MapView/CollectionMapView.tsx
deleted file mode 100644
index 885f51bfb..000000000
--- a/src/client/views/collections/MapView/CollectionMapView.tsx
+++ /dev/null
@@ -1,272 +0,0 @@
-import { GoogleMap, Marker, InfoWindow, InfoBox, useJsApiLoader, LoadScript, GoogleMapProps, StandaloneSearchBox, Autocomplete } from '@react-google-maps/api';
-import { observable, action, computed, Lambda, runInAction, IReactionDisposer } from "mobx";
-import { observer } from "mobx-react";
-import { Doc, DocListCast, Field, FieldResult, Opt } from "../../../../fields/Doc";
-import { documentSchema } from "../../../../fields/documentSchemas";
-import { Id } from "../../../../fields/FieldSymbols";
-import { makeInterface } from "../../../../fields/Schema";
-import { Cast, NumCast, ScriptCast, StrCast } from "../../../../fields/Types";
-import { LinkManager } from "../../../util/LinkManager";
-import { undoBatch, UndoManager } from "../../../util/UndoManager";
-import "./CollectionMapView.scss";
-import { CollectionSubView } from "../CollectionSubView";
-import React = require("react");
-import requestPromise = require("request-promise");
-import ReactDOM from 'react-dom';
-import { DragManager } from '../../../util/DragManager';
-import { MapMarker } from '../../nodes/MapBox/MapMarker';
-
-
-/**
- * Idea behind storing a marker:
- * 1. on the map api, have a button "add marker" that adds the marker on the map & store the marker as a node in the collection
- * (but don't render the marker in the collection itself)
- * 2. each marker, as a node, has the same feature as all other nodes for linking (the same way one could form a link between a node inside a child collection 
- * and a node outside the child collection)
- * 
- * /util/LinkManager.ts -- link relations
- * 
- */
-
-type MapSchema = makeInterface<[typeof documentSchema]>;
-const MapSchema = makeInterface(documentSchema);
-
-export type Coordinates = {
-    lat: number,
-    lng: number,
-}
-
-export type LocationData = {
-    id: string;
-    pos: Coordinates;
-};
-
-const mapContainerStyle = {
-    height: '100%',
-};
-
-const defaultCenter = {
-    lat: 38.685,
-    lng: -115.234,
-};
-
-const mapOptions = {
-    fullscreenControl: false,
-}
-
-// const drawingManager = new google.maps.drawing.DrawingManager({
-//     drawingControl: true,
-//     drawingControlOptions: {
-//         position: google.maps.ControlPosition.TOP_RIGHT,
-//         drawingModes: [
-//             google.maps.drawing.OverlayType.MARKER,
-//             // currently we are not supporting the following drawing mode on map, a thought for future development
-//             // google.maps.drawing.OverlayType.CIRCLE,
-//             // google.maps.drawing.OverlayType.POLYLINE,
-//         ],
-//     },
-// });
-
-const options = {
-    fields: ["formatted_address", "geometry", "name"], // note: level of details is charged by item per retrieval, not recommended to return all fields
-    strictBounds: false,
-    types: ["establishment"], // type pf places, subject of change according to user need
-} as google.maps.places.AutocompleteOptions;
-
-@observer
-export default class CollectionMapView extends CollectionSubView<MapSchema, Partial<GoogleMapProps>>(MapSchema) {
-    private _dropDisposer?: DragManager.DragDropDisposer;
-    private _disposers: { [name: string]: IReactionDisposer } = {};
-
-
-    @observable private _map = null as unknown as google.maps.Map;
-    @observable private selectedPlace: LocationData | undefined;
-    @observable private markerMap: { [id: string]: google.maps.Marker } = {};
-    @observable private center = defaultCenter;
-    @observable private zoom = 2.5;
-    @observable private infoWindowOpen = false;
-    @observable private bounds = new window.google.maps.LatLngBounds();
-    @observable private inputRef = React.createRef<HTMLInputElement>();
-    @observable private searchMarkers: google.maps.Marker[] = [];
-    @observable private searchBox = new window.google.maps.places.Autocomplete(this.inputRef.current!, options);
-
-    @observable private myPlaces: LocationData[] = [
-        { id: "id1", pos: { lat: 39.09366509575983, lng: -94.58751660204751 } },
-        { id: "id2", pos: { lat: 41.82399, lng: -71.41283 } },
-        { id: "id3", pos: { lat: 47.606214, lng: -122.33207 } },
-    ];
-
-    @action
-    private setSearchBox = (searchBox: any) => {
-        this.searchBox = searchBox;
-    }
-
-    // iterate myPlaces to size, center, and zoom map to contain all markers
-    private fitBounds = (map: google.maps.Map) => {
-        console.log('map bound is:' + this.bounds);
-        this.myPlaces ? this.myPlaces.map(place => {
-            this.bounds.extend(place.pos!);
-        }) : null;
-        map.fitBounds(this.bounds);
-    }
-
-    // store a reference to google map instance; fit map bounds to contain all markers
-    @action
-    private loadHandler = (map: google.maps.Map) => {
-        this._map = map;
-        drawingManager.setMap(map);
-        this.fitBounds(map);
-    }
-
-    @action
-    private markerClickHandler = (e: MouseEvent, place: any) => {
-        // set which place was clicked
-        this.selectedPlace = place;
-
-        console.log(this.selectedPlace);
-
-        // used so clicking a second marker works
-        if (this.infoWindowOpen) {
-            this.infoWindowOpen = false;
-            console.log("closeinfowindow")
-        }
-        this.infoWindowOpen = true;
-        console.log("open infowindow")
-    }
-
-    @action
-    private handleInfoWindowClose = () => {
-        if (this.infoWindowOpen) {
-            this.infoWindowOpen = false;
-        }
-        this.infoWindowOpen = false;
-        this.selectedPlace = undefined;
-    }
-
-    @action
-    private handlePlaceChanged = () => {
-        console.log(this.searchBox);
-        const place = this.searchBox.getPlace();
-
-        if (!place.geometry || !place.geometry.location) {
-            // user entered the name of a place that wasn't suggested & pressed the enter key, or place details request failed
-            window.alert("No details available for input: '" + place.name + "'");
-            return;
-        }
-
-        // zoom in on the location of the search result
-        if (place.geometry.viewport) {
-            console.log(this._map);
-            this._map.fitBounds(place.geometry.viewport);
-        } else {
-            console.log(this._map);
-            this._map.setCenter(place.geometry.location);
-            this._map.setZoom(17);
-        }
-
-        // customize icon => customized icon for the nature of the location selected
-        const icon = {
-            url: place.icon as string,
-            size: new google.maps.Size(71, 71),
-            origin: new google.maps.Point(0, 0),
-            anchor: new google.maps.Point(17, 34),
-            scaledSize: new google.maps.Size(25, 25),
-        };
-
-        // put temporary cutomized marker on searched location
-        this.searchMarkers.forEach((marker) => {
-            marker.setMap(null);
-        });
-        this.searchMarkers = [];
-        this.searchMarkers.push(
-            new window.google.maps.Marker({
-                map: this._map,
-                icon,
-                title: place.name,
-                position: place.geometry.location,
-            })
-        )
-    }
-
-
-    @action
-    private addMarker = (location: google.maps.LatLng | undefined, map: google.maps.Map) => {
-        new window.google.maps.Marker({
-            position: location,
-            map: map
-        });
-    }
-
-    @action
-    private markerLoadHandler = (marker: google.maps.Marker, place: LocationData) => {
-        place.id ? this.markerMap[place.id] = marker : null;
-    }
-
-    render() {
-        const { Document, fieldKey, isContentActive: active } = this.props;
-
-        return <div className="collectionMapView" ref={this.createDashEventsTarget}>
-
-            <div className={"collectionMapView-contents"}
-                style={{ pointerEvents: active() ? undefined : "none", overflow: 'hidden' }}
-                onWheel={e => e.stopPropagation()}
-                onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} >
-                {/* <LoadScript
-                    googleMapsApiKey={process.env.GOOGLE_MAPS!}
-                    libraries={['places', 'drawing']}
-                > */}
-                <div className="map-wrapper">
-                    <GoogleMap
-                        mapContainerStyle={mapContainerStyle}
-                        zoom={this.zoom}
-                        center={this.center}
-                        onLoad={map => this.loadHandler(map)}
-                        options={mapOptions}
-                    >
-                        <Autocomplete
-                            onLoad={this.setSearchBox}
-                            onPlaceChanged={this.handlePlaceChanged}>
-                            <input ref={this.inputRef} className="searchbox" type="text" placeholder="Search anywhere:" />
-                        </Autocomplete>
-
-                        {this.myPlaces ? this.myPlaces.map(place =>
-                            <Marker
-                                position={place.pos}
-                                onLoad={marker => this.markerLoadHandler(marker, place)}
-                                onClick={e => this.markerClickHandler(e, place)}
-                                draggable={false}
-                            />
-                        ) : null}
-                        {this.infoWindowOpen && this.selectedPlace && (
-                            <InfoWindow
-                                anchor={this.markerMap[this.selectedPlace.id!]}
-                                onCloseClick={this.handleInfoWindowClose}
-                            >
-                                <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}>
-                                    <div style={{ fontSize: 16 }}>
-                                        <div>
-                                            <img src="http://placekitten.com/200/300" />
-                                            <hr />
-                                            <form>
-                                                <label>Title: </label><br />
-                                                <input type="text" id="fname" name="fname"></input><br />
-                                                <label>Desription: </label><br />
-                                                <textarea style={{ height: 150 }} id="lname" name="lname" placeholder="Notes, a short description of this location, a brief comment, etc."></textarea>
-                                            </form>
-                                            <hr />
-                                            <div>
-                                                <button>New link+</button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </InfoWindow>
-                        )}
-                    </GoogleMap>
-                </div>
-                {/* </LoadScript > */}
-            </div >
-        </div >;
-    }
-
-}
\ No newline at end of file