Add Geolocation from behind feature flag

client/src/components/AreaDetail/AreaDetail.tsx

@@ -267,7 +267,7 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
   //   description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.MED_HOME_VAL),
   //   value: properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] ?
   //   properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] : null,
-  //   isDisadvagtaged: false, // TODO
+  //   isDisadvagtaged: false,
   // };
 
   const proxHaz: indicatorInfo = {

client/src/components/J40Map.module.scss

@@ -1,24 +1,71 @@
 @use '../styles/design-system.scss' as *;
 @import "./utils.scss";
 
-.j40Popup {
-  width: 375px;
+
+.j40Map {
+  @include at-media-max("desktop") {
+    // < 1024
+    height: 55vh;
+  }
+
+  .mapHeaderRow{
+    @include u-display("flex");
+    @include u-padding-left(1.5);
+    
+    justify-content: space-between;
+
+    /* 
+      This width is set to prevent this row from 
+      overflowing. Using justify-content: space-between
+      will allow the geolocation button to be right 
+      ajusted. Without the width property constraint
+      of 98%, the space-between property forces the
+      geolocation icon out of the parent container.
+      
+      Since the geolocation control is absolutely
+      positioned, attempts were made to set the 
+      parent to be relative to avoid this, however
+      it seems that we haven't found a cleaner
+      solution (yet).
+    */
+    width: 98%;
+
+    
+    .geolocateBox {
+      @include u-margin-top(3);
+      
+      .geolocateIcon{
+        align-self: flex-end;
+        @include u-margin-right(4);
+        @include u-margin-top(.5);
+        
+        @include at-media-max("tablet") {
+          // < 640
+          @include u-margin-top(3);
+        }
+        
+        @media (max-width: 362px){
+          @include u-margin-top(5);
+
+        }
+      }
+    }
   }
 
   .navigationControl {
     left: .75em;
     top: units(15);
-  // width: 2.5em;
   }
   
+  //These classes are behind feature flags:
   .fullscreenControl {
     right: 1.25em;
     top: 2.5em;
   }
+  .j40Popup {
+    width: 375px;
+  }
 
-.geolocateControl {
-  right: 1.25em;
-  top: 5em;
 }
 
 .mapInfoPanel {
@@ -26,11 +73,3 @@
   overflow-y: auto;
   height: 90vh;
 }
-
-// This will control the height of the map when the device 
-// width is less than desktop (1024px)
-.j40Map {
-  @include at-media-max("desktop") {
-    height: 55vh;
-  }
-}

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

@@ -1,14 +1,23 @@
 declare namespace J40MapModuleScssNamespace {
   export interface IJ40MapModuleScss {
-    j40Popup: string;
-    territoryFocusButton: string;
-    territoryFocusContainer: string;
-    navigationControl: string;
-    fullscreenControl: string;
-    geolocateControl: string;
-    detailView: string;
-    mapInfoPanel: string;
+    // main J40 map style
     j40Map: string;
+
+    // map header row
+    mapHeaderRow: string;
+    geolocateBox: string;
+    geolocateMessage: string;
+    geolocateMessageHide: string;
+    geolocateIcon: string;
+
+    // nav control
+    navigationControl: string;
+
+    // feature flags
+    fullscreenControl: string;
+    j40Popup: string;
+
+    mapInfoPanel: string;
   }
 }
 

client/src/components/J40Map.tsx

@@ -98,7 +98,12 @@ export const featureURLForTilesetName = (tilesetName: string): string => {
   }
 };
 
-
+/**
+ * This the main map component
+ *
+ * @param {IJ40Interface} location
+ * @returns {ReactElement}
+ */
 const J40Map = ({location}: IJ40Interface) => {
   /**
    * Initializes the zoom, and the map's center point (lat, lng) via the URL hash #{z}/{lat}/{long}
@@ -329,12 +334,12 @@ const J40Map = ({location}: IJ40Interface) => {
   return (
     <>
       <Grid desktop={{col: 9}} className={styles.j40Map}>
-
         {/**
-         * This will render the MapSearch component
-         *
          * Note:
-         * The MapSearch component is no longer wrapped in a div in order to allow this feature
+         * The MapSearch component is no longer used in this location. It has been moved inside the
+         * <ReactMapGL> component itself.
+         *
+         * It was originally wrapped in a div in order to allow this feature
          * to be behind a feature flag. This was causing a bug for MapSearch to render
          * correctly in a production build. Leaving this comment here in case future flags are
          * needed in this component.
@@ -346,9 +351,10 @@ const J40Map = ({location}: IJ40Interface) => {
          *   - npm run clean && npm run build && npm run serve
          *
          * to ensure the production build works and that MapSearch and the map (ReactMapGL) render correctly.
+         *
+         * Any component declrations outside the <ReactMapGL> component may be susceptible to this bug.
          */}
-        <MapSearch goToPlace={goToPlace}/>
-
+        {/* <MapSearch goToPlace={goToPlace}/> */}
 
         {/**
          * The ReactMapGL component's props are grouped by the API's documentation. The component also has
@@ -393,7 +399,9 @@ const J40Map = ({location}: IJ40Interface) => {
           data-cy={'reactMapGL'}
         >
           {/**
-           * The low zoom source
+           * Load all data sources and layers
+           *
+           * First the low zoom:
            */}
           <Source
             id={constants.LOW_ZOOM_SOURCE_NAME}
@@ -483,25 +491,34 @@ const J40Map = ({location}: IJ40Interface) => {
             />
           </Source>
 
-          {/* This will add the navigation controls of the zoom in and zoom out buttons */}
+          {/* This is the first overlayed row on the map: Search and Geolocation */}
+          <div className={styles.mapHeaderRow}>
+            <MapSearch goToPlace={goToPlace}/>
+
+            <div className={styles.geolocateBox}>
+              <div className={styles.geolocateIcon}>
+                <GeolocateControl
+                  positionOptions={{enableHighAccuracy: true}}
+                  onGeolocate={onGeolocate}
+                  onClick={onClickGeolocate}
+                  trackUserLocation={true}
+                />
+              </div>
+            </div>
+
+          </div>
+
+          {/* This is the second row overlayed on the map, it will add the navigation controls
+          of the zoom in and zoom out buttons */}
           { windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG && <NavigationControl
             showCompass={false}
             className={styles.navigationControl}
           /> }
 
-          {/* This will show shortcut buttons to pan/zoom to US territories */}
+          {/* This is the third row overlayed on the map, it will show shortcut buttons to
+          pan/zoom to US territories */}
           <TerritoryFocusControl onClick={onClick}/>
 
-          {/* This places Geolocation behind a feature flag */}
-          {'gl' in flags ? <GeolocateControl
-            className={styles.geolocateControl}
-            positionOptions={{enableHighAccuracy: true}}
-            onGeolocate={onGeolocate}
-            // @ts-ignore
-            onClick={onClickGeolocate}
-          /> : ''}
-          {geolocationInProgress ? <div>Geolocation in progress...</div> : ''}
-
           {/* Enable fullscreen pop-up behind a feature flag */}
           {('fs' in flags && detailViewData && !transitionInProgress) && (
             <Popup

client/src/components/MapSearch/MapSearch.module.scss

@@ -1,20 +1,12 @@
 @use '../../styles/design-system.scss' as *;
 
 .mapSearchContainer {
-
-    // styles for mobile-lg (480px) and greater widths,
-    @include at-media('mobile-lg') {
-        position: absolute;
-        // top: units(4);
-        left: units(1.5);
-        width: 50%;
-        z-index: 1;
-    }
-    
-    // styles for less than mobile-lg (480px)
-    position: absolute;
-    left: units(1.5);
-    width: 90%;
-    z-index: 1;
+    /*
+      The width of the container is being limited so that 
+      as the device width decreases, the geolocation 
+      button has enough space between the Search
+      component
+    */
+    width: 71%;
 }