Fixes #280 - adds territory focus buttons for Alaska, Hawaii, Lower 48, and Puerto Rico to enable easy zoom to these locations (#315)

client/src/components/J40Map.module.scss

@@ -12,3 +12,32 @@ $sidebar-color: #ffffff;
   overflow-y: scroll;
   pointer-events: all !important;
 }
+
+.territoryFocusButton {
+  width: 40px;
+  height: 40px;
+  border-width: 1px 2px;
+  border-color: #000000;
+  border-style: solid;
+  background-color: #ffffff;
+}
+
+.territoryFocusContainer {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  font-size: 16px;
+  line-height: 40px;
+  position: absolute;
+  left: 20px;
+  top: 300px;
+  z-index: 10;
+}
+
+.territoryFocusButton:first-child {
+  border-top-width: 2px;
+}
+
+.territoryFocusButton:last-child {
+  border-bottom-width: 2px;
+}

client/src/components/J40Map.module.scss.d.ts

@@ -2,6 +2,8 @@ declare namespace J40MapModuleScssNamespace {
   export interface IJ40MapModuleScss {
     mapContainer: string;
     j40Popup: string;
+    territoryFocusButton: string;
+    territoryFocusContainer: string;
   }
 }
 

client/src/components/J40Map.tsx

@@ -6,12 +6,12 @@ import maplibregl, {LngLatBoundsLike,
   PopupOptions,
   Popup,
   LngLatLike} from 'maplibre-gl';
-import 'maplibre-gl/dist/maplibre-gl.css';
 import mapStyle from '../data/mapStyle';
 import ZoomWarning from './zoomWarning';
 import PopupContent from './popupContent';
 import * as constants from '../data/constants';
 import ReactDOM from 'react-dom';
+import 'maplibre-gl/dist/maplibre-gl.css';
 import * as styles from './J40Map.module.scss';
 
 declare global {
@@ -24,13 +24,10 @@ type ClickEvent = maplibregl.MapMouseEvent & maplibregl.EventData;
 
 const J40Map = () => {
   const mapContainer = React.useRef<HTMLDivElement>(null);
-  const map = useRef<Map>() as React.MutableRefObject<Map>;
+  const mapRef = useRef<Map>() as React.MutableRefObject<Map>;
   const [zoom, setZoom] = useState(constants.GLOBAL_MIN_ZOOM);
 
   useEffect(() => {
-    // Only initialize once
-    if (map.current && mapContainer.current) return;
-
     const initialMap = new Map({
       container: mapContainer.current!,
       style: mapStyle,
@@ -56,8 +53,8 @@ const J40Map = () => {
 
     initialMap.on('click', handleClick);
     initialMap.addControl(new NavigationControl({showCompass: false}), 'top-left');
-    map.current = initialMap;
-  });
+    mapRef.current = initialMap;
+  }, []);
 
   const handleClick = (e: ClickEvent) => {
     const map = e.target;
@@ -82,20 +79,78 @@ const J40Map = () => {
   };
 
   useEffect(() => {
-    if (!map.current) return; // wait for map to initialize
-    map.current.on('move', () => {
-      setZoom(map.current.getZoom());
+    mapRef.current.on('move', () => {
+      setZoom(mapRef.current.getZoom());
     });
-    map.current.on('mouseenter', 'score', () => {
-      map.current.getCanvas().style.cursor = 'pointer';
+    mapRef.current.on('mouseenter', 'score', () => {
+      mapRef.current.getCanvas().style.cursor = 'pointer';
     });
-    map.current.on('mouseleave', 'score', () => {
-      map.current.getCanvas().style.cursor = '';
+    mapRef.current.on('mouseleave', 'score', () => {
+      mapRef.current.getCanvas().style.cursor = '';
     });
-  });
+  }, [mapRef]);
+
+  const goToPlace = (bounds:number[][]) => {
+    mapRef.current.fitBounds(bounds as LngLatBoundsLike);
+  };
+
+  const onClickTerritoryFocusButton = (event: React.MouseEvent<HTMLButtonElement>) => {
+    // currentTarget always refers to the element to which the event handler
+    // has been attached, as opposed to Event.target, which identifies
+    // the element on which the event occurred and which may be its descendant.
+    const buttonID = event.target && event.currentTarget.id;
+
+    switch (buttonID) {
+      case '48':
+        goToPlace(constants.LOWER_48_BOUNDS);
+        break;
+      case 'AK':
+        goToPlace(constants.ALASKA_BOUNDS);
+        break;
+      case 'HI':
+        goToPlace(constants.HAWAII_BOUNDS);
+        break;
+      case 'PR':
+        goToPlace(constants.PUERTO_RICO_BOUNDS);
+        break;
+
+      default:
+        break;
+    }
+  };
 
   return (
     <div>
+      <div className={styles.territoryFocusContainer}>
+        <button
+          id={'48'}
+          onClick={onClickTerritoryFocusButton}
+          className={styles.territoryFocusButton}
+          aria-label="Zoom to Lower 48" >
+            48
+        </button>
+        <button
+          id={'AK'}
+          onClick={onClickTerritoryFocusButton}
+          className={styles.territoryFocusButton}
+          aria-label="Zoom to Alaska" >
+            AK
+        </button>
+        <button
+          id={'HI'}
+          onClick={onClickTerritoryFocusButton}
+          className={styles.territoryFocusButton}
+          aria-label="Zoom to Hawaii" >
+            HI
+        </button>
+        <button
+          id={'PR'}
+          onClick={onClickTerritoryFocusButton}
+          className={styles.territoryFocusButton}
+          aria-label="Zoom to Puerto Rico" >
+            PR
+        </button>
+      </div>
       <div ref={mapContainer} className={styles.mapContainer}/>
       <ZoomWarning zoomLevel={zoom} />
     </div>