From d75a0888c3699a5fd51041ce23bee6ac3745ddcf Mon Sep 17 00:00:00 2001
From: Nat Hillard <Nathaniel.K.Hillard@omb.eop.gov>
Date: Wed, 30 Jun 2021 00:15:33 -0400
Subject: [PATCH] Working mapbox popup

---
 client/src/components/mapboxMap.module.scss   |  9 ++++++--
 .../src/components/mapboxMap.module.scss.d.ts |  2 +-
 client/src/components/mapboxMap.tsx           | 21 ++++++++++---------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/client/src/components/mapboxMap.module.scss b/client/src/components/mapboxMap.module.scss
index a36c30ec..f1681ae9 100644
--- a/client/src/components/mapboxMap.module.scss
+++ b/client/src/components/mapboxMap.module.scss
@@ -21,8 +21,13 @@ $sidebar-color: #ffffff;
   border-radius: 4px;
 }
 
-.mapboxgl-popup {
-  background-color: red;
+.j40Popup {
   max-height: 300px;
+  max-width: 300px;
   overflow: scroll;
+  pointer-events: all !important;
+}
+
+.j40Popup .mapboxgl-popup-content {
+  pointer-events: all;
 }
diff --git a/client/src/components/mapboxMap.module.scss.d.ts b/client/src/components/mapboxMap.module.scss.d.ts
index f79d08b6..ad779b56 100644
--- a/client/src/components/mapboxMap.module.scss.d.ts
+++ b/client/src/components/mapboxMap.module.scss.d.ts
@@ -2,7 +2,7 @@ declare namespace MapboxMapModuleScssNamespace {
   export interface IMapboxMapModuleScss {
     sidebar: string;
     mapContainer: string;
-    mapboxglPopup: string;
+    j40Popup: string;
   }
 }
 
diff --git a/client/src/components/mapboxMap.tsx b/client/src/components/mapboxMap.tsx
index e6001fbe..9a6f77da 100644
--- a/client/src/components/mapboxMap.tsx
+++ b/client/src/components/mapboxMap.tsx
@@ -4,21 +4,21 @@ import {LngLatBoundsLike,
   Map,
   NavigationControl,
   PopupOptions,
-  Popup} from 'mapbox-gl';
+  Popup,
+  LngLatLike} from 'mapbox-gl';
 import mapStyle from '../data/mapStyle';
 import ZoomWarning from './zoomWarning';
 import PopupContent from './popupContent';
 import * as styles from './mapboxMap.module.scss';
 import * as constants from '../data/constants';
 import ReactDOM from 'react-dom';
+import 'mapbox-gl/dist/mapbox-gl.css';
 
 type ClickEvent = mapboxgl.MapMouseEvent & mapboxgl.EventData;
 
 const MapboxMap = () => {
   const mapContainer = React.useRef<HTMLDivElement>(null);
   const map = useRef<Map>() as React.MutableRefObject<Map>;
-  const [lat, setLat] = useState(constants.DEFAULT_CENTER[0]);
-  const [lng, setLng] = useState(constants.DEFAULT_CENTER[1]);
   const [zoom, setZoom] = useState(constants.GLOBAL_MIN_ZOOM);
 
   useEffect(() => {
@@ -28,7 +28,7 @@ const MapboxMap = () => {
     const initialMap = new Map({
       container: mapContainer.current!,
       style: mapStyle,
-      center: [lng, lat],
+      center: constants.DEFAULT_CENTER as LngLatLike,
       zoom: zoom,
       minZoom: constants.GLOBAL_MIN_ZOOM,
       maxZoom: constants.GLOBAL_MAX_ZOOM,
@@ -51,7 +51,7 @@ const MapboxMap = () => {
       ReactDOM.render(<PopupContent properties={features[0].properties} />, placeholder);
       const options : PopupOptions = {
         offset: [0, 0],
-        className: styles.mapboxglPopup,
+        className: styles.j40Popup,
       };
       new Popup(options)
           .setLngLat(e.lngLat)
@@ -64,17 +64,18 @@ const MapboxMap = () => {
   useEffect(() => {
     if (!map.current) return; // wait for map to initialize
     map.current.on('move', () => {
-      setLng(map.current.getCenter().lng);
-      setLat(map.current.getCenter().lat);
       setZoom(map.current.getZoom());
     });
+    map.current.on('mouseenter', 'score-low', () => {
+      map.current.getCanvas().style.cursor = 'pointer';
+    });
+    map.current.on('mouseleave', 'score-low', () => {
+      map.current.getCanvas().style.cursor = '';
+    });
   });
 
   return (
     <div>
-      <div className={styles.sidebar}>
-            Longitude: {lng.toFixed(4)} | Latitude: {lat.toFixed(4)} | Zoom: {zoom.toFixed(2)}
-      </div>
       <div ref={mapContainer} className={styles.mapContainer}/>
       <ZoomWarning zoomLevel={zoom} />
     </div>