From 2e6709216795e86c8b414dcb2dd45855cf23ea24 Mon Sep 17 00:00:00 2001
From: Aubrey Li <Aubrey-Li>
Date: Tue, 30 Nov 2021 17:53:13 -0500
Subject: latest from Mapbox

---
 deploy/index.html                                  |  2 --
 package-lock.json                                  |  6 ++--
 package.json                                       |  2 +-
 src/client/views/MainView.tsx                      |  2 +-
 .../collections/MapView/CollectionMapView.tsx      | 24 +++++++-------
 src/client/views/nodes/MapBox/MapBox.tsx           | 38 ++++++++++++++--------
 6 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/deploy/index.html b/deploy/index.html
index a34cb4d3e..a236de872 100644
--- a/deploy/index.html
+++ b/deploy/index.html
@@ -11,8 +11,6 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
         integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.3.1/typescript.min.js"></script>
-    <script
-        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyALJU8DfCAqEAS0OqMDCmkE0otlz4H81fg&libraries=places,drawing"></script>
 
     <script>
         function getCookie(cname) {
diff --git a/package-lock.json b/package-lock.json
index 2cbb2a7cd..288247869 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7759,14 +7759,14 @@
             "resolved": "https://registry.npmjs.org/image-size-stream/-/image-size-stream-1.1.0.tgz",
             "integrity": "sha1-Ivou2mbG31AQh0bacUkmSy0l+Gs=",
             "requires": {
-                "image-size": "image-size@git+https://github.com/netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1",
+                "image-size": "github:netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1",
                 "readable-stream": "^1.0.33",
                 "tryit": "^1.0.1"
             },
             "dependencies": {
                 "image-size": {
-                    "version": "git+ssh://git@github.com/netroy/image-size.git#da2c863807a3e9602617bdd357b0de3ab4a064c1",
-                    "from": "image-size@git+https://github.com/netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1"
+                    "version": "github:netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1",
+                    "from": "github:netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1"
                 },
                 "isarray": {
                     "version": "0.0.1",
diff --git a/package.json b/package.json
index b0e74440c..40504b9d8 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",
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 7ec7277a9..2929630b6 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -187,7 +187,7 @@ export class MainView extends React.Component {
             fa.faArrowAltCircleDown, fa.faArrowAltCircleUp, fa.faArrowAltCircleLeft, fa.faArrowAltCircleRight, fa.faStopCircle, fa.faCheckCircle, fa.faGripVertical,
             fa.faSortUp, fa.faSortDown, fa.faTable, fa.faTh, fa.faThList, fa.faProjectDiagram, fa.faSignature, fa.faColumns, fa.faChevronCircleUp, fa.faUpload, fa.faBorderAll,
             fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines,
-            fa.faSave, fa.faBookmark, fa.faList, fa.faListOl, fa.faFolderPlus, fa.faLightbulb, fa.faBookOpen, fa.faMapMarkedAlt);
+            fa.faSave, fa.faBookmark, fa.faList, fa.faListOl, fa.faFolderPlus, fa.faLightbulb, fa.faBookOpen, fa.faMapMarkerAlt);
         this.initAuthenticationRouters();
     }
 
diff --git a/src/client/views/collections/MapView/CollectionMapView.tsx b/src/client/views/collections/MapView/CollectionMapView.tsx
index 1166de61c..885f51bfb 100644
--- a/src/client/views/collections/MapView/CollectionMapView.tsx
+++ b/src/client/views/collections/MapView/CollectionMapView.tsx
@@ -54,18 +54,18 @@ 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 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
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 6894cea19..7875060e2 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -28,6 +28,7 @@ import { Annotation } from '../../pdf/Annotation';
 import { SidebarAnnos } from '../../SidebarAnnos';
 import { StyleProp } from '../../StyleProvider';
 import { FieldView, FieldViewProps } from '../FieldView';
+import * as dotenv from 'dotenv';
 import "./MapBox.scss";
 
 /**
@@ -61,21 +62,30 @@ const mapOptions = {
     fullscreenControl: false,
 }
 
+dotenv.config({ path: __dirname + '/.env' })
+const apiKey = process.env.GOOGLE_MAPS;
+
+const script = document.createElement('script');
+script.defer = true;
+script.async = true;
+script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,drawing`;
+document.head.appendChild(script);
+
 /**
  * Consider integrating later: allows for drawing, circling, making shapes on map
  */
-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 drawingManager = new window.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,
+//         ],
+//     },
+// });
 
 
 // options for searchbox in Google Maps Places Autocomplete API
@@ -87,6 +97,7 @@ const options = {
 
 @observer
 export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps & Partial<GoogleMapProps>, MapDocument>(MapDocument) {
+
     private _dropDisposer?: DragManager.DragDropDisposer;
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
@@ -602,8 +613,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 childPointerEvents={true}
                 pointerEvents={CurrentUserUtils.SelectedTool !== InkTool.None || this._isAnnotating || SnappingManager.GetIsDragging() ? "all" : "none"} />;
         return <div className="mapBox" ref={this._ref}>
+            {console.log(apiKey)}
             {/* <LoadScript
-                googleMapsApiKey={process.env.GOOGLE_MAPS!}
+                googleMapsApiKey={apiKey!}
                 libraries={['places', 'drawing']}
             > */}
             <div className="mapBox-wrapper"
-- 
cgit v1.2.3-70-g09d2