Add 4 additional territory buttons (#956)

* Add 4 additional territory buttons

* Fix bug where territories fires multiple times

- move territory handler from J40Map to component

* Update SVGs for all territory buttons

client/src/components/J40Map.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 // External Libs:
-import React, {MouseEvent, useRef, useState, useMemo} from 'react';
+import React, {useRef, useState, useMemo} from 'react';
 import {Map, MapboxGeoJSONFeature, LngLatBoundsLike} from 'maplibre-gl';
 import ReactMapGL, {
   MapEvent,
@@ -136,29 +136,6 @@ const J40Map = ({location}: IJ40Interface) => {
     });
   };
 
-  const onClickTerritoryFocusButton = (event: MouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation();
-    const buttonID = event.target && (event.target as HTMLElement).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;
-    }
-  };
-
   const onTransitionStart = () => {
     setTransitionInProgress(true);
   };
@@ -273,7 +250,7 @@ const J40Map = ({location}: IJ40Interface) => {
             onClick={onClickGeolocate}
           /> : ''}
           {geolocationInProgress ? <div>Geolocation in progress...</div> : ''}
-          <TerritoryFocusControl onClickTerritoryFocusButton={onClickTerritoryFocusButton}/>
+          <TerritoryFocusControl goToPlace={goToPlace}/>
           {'fs' in flags ? <FullscreenControl className={styles.fullscreenControl}/> :'' }
 
         </ReactMapGL>