From eeb7d07c408d67bbbb3b97071a938f8ff2668d1a Mon Sep 17 00:00:00 2001
From: Vim USDS <vimal.k.shah@omb.eop.gov>
Date: Thu, 15 Sep 2022 17:30:48 -0700
Subject: [PATCH] Add USVI and GU to map

- remove shortcuts on mobile
---
 client/src/components/J40Map.tsx              |  4 ++--
 .../src/components/territoryFocusControl.tsx  | 20 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx
index 6b946643..6c02019b 100644
--- a/client/src/components/J40Map.tsx
+++ b/client/src/components/J40Map.tsx
@@ -397,7 +397,6 @@ const J40Map = ({location}: IJ40Interface) => {
           onLoad={onLoad}
           onTransitionStart={onTransitionStart}
           onTransitionEnd={onTransitionEnd}
-
           ref={mapRef}
           data-cy={'reactMapGL'}
         >
@@ -461,7 +460,8 @@ const J40Map = ({location}: IJ40Interface) => {
 
           {/* This is the third row overlayed on the map, it will show shortcut buttons to
           pan/zoom to US territories */}
-          <TerritoryFocusControl onClick={onClick}/>
+          { windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG &&
+            <TerritoryFocusControl onClick={onClick}/> }
 
           {/* Enable fullscreen pop-up behind a feature flag */}
           {('fs' in flags && detailViewData && !transitionInProgress) && (
diff --git a/client/src/components/territoryFocusControl.tsx b/client/src/components/territoryFocusControl.tsx
index 5911fb9f..7f0f0205 100644
--- a/client/src/components/territoryFocusControl.tsx
+++ b/client/src/components/territoryFocusControl.tsx
@@ -30,10 +30,10 @@ const TerritoryFocusControl = ({onClick}: ITerritoryFocusControl) => {
       short: intl.formatMessage(EXPLORE_COPY.MAP.PR_SHORT),
       long: intl.formatMessage(EXPLORE_COPY.MAP.PR_LONG),
     },
-    // {
-    //   short: intl.formatMessage(EXPLORE_COPY.MAP.GU_SHORT),
-    //   long: intl.formatMessage(EXPLORE_COPY.MAP.GU_LONG),
-    // },
+    {
+      short: intl.formatMessage(EXPLORE_COPY.MAP.GU_SHORT),
+      long: intl.formatMessage(EXPLORE_COPY.MAP.GU_LONG),
+    },
     {
       short: intl.formatMessage(EXPLORE_COPY.MAP.AS_SHORT),
       long: intl.formatMessage(EXPLORE_COPY.MAP.AS_LONG),
@@ -42,10 +42,10 @@ const TerritoryFocusControl = ({onClick}: ITerritoryFocusControl) => {
       short: intl.formatMessage(EXPLORE_COPY.MAP.MP_SHORT),
       long: intl.formatMessage(EXPLORE_COPY.MAP.MP_LONG),
     },
-    // {
-    //   short: intl.formatMessage(EXPLORE_COPY.MAP.VI_SHORT),
-    //   long: intl.formatMessage(EXPLORE_COPY.MAP.VI_LONG),
-    // },
+    {
+      short: intl.formatMessage(EXPLORE_COPY.MAP.VI_SHORT),
+      long: intl.formatMessage(EXPLORE_COPY.MAP.VI_LONG),
+    },
   ];
   // the offset for this array should map the territories variable
   const territoriesIconClassName = [
@@ -53,10 +53,10 @@ const TerritoryFocusControl = ({onClick}: ITerritoryFocusControl) => {
     'mapboxgl-ctrl-zoom-to-ak',
     'mapboxgl-ctrl-zoom-to-hi',
     'mapboxgl-ctrl-zoom-to-pr',
-    // 'mapboxgl-ctrl-zoom-to-gu',
+    'mapboxgl-ctrl-zoom-to-gu',
     'mapboxgl-ctrl-zoom-to-as',
     'mapboxgl-ctrl-zoom-to-mp',
-    // 'mapboxgl-ctrl-zoom-to-vi',
+    'mapboxgl-ctrl-zoom-to-vi',
   ];
 
   return (