Modify geolocate icon and beacon to be black

client/src/components/J40Map.module.scss

@@ -32,22 +32,32 @@
 
     
     .geolocateBox {
-      @include u-margin-top(3);
+      margin-top: 6px;
 
-      .geolocateIcon{
-        align-self: flex-end;
-        @include u-margin-right(4);
-        @include u-margin-top(.5);
+      .geolocateMessage {
+        visibility: visible;
+        background-color: white;
+        margin-bottom: 3px;
+      }
+      
+      .geolocateMessageHide {
+        visibility: hidden;
+        margin-bottom: 3px;
+      }
       
       @include at-media-max("tablet") {
         // < 640
-          @include u-margin-top(3);
+        margin-top: 28px;
       }
       
-        @media (max-width: 362px){
-          @include u-margin-top(5);
+      @media (max-width: 365px){
+        margin-top: 46px;
 
       }
+      .geolocateIcon{
+        align-self: flex-end;
+        @include u-margin-right(4);
+        
       }
     }
   }

client/src/components/J40Map.tsx

@@ -13,6 +13,7 @@ import ReactMapGL, {
   FlyToInterpolator,
   FullscreenControl,
   MapRef, Source, Layer} from 'react-map-gl';
+import {useIntl} from 'gatsby-plugin-intl';
 import bbox from '@turf/bbox';
 import * as d3 from 'd3-ease';
 import {isMobile} from 'react-device-detect';
@@ -34,6 +35,7 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 import * as constants from '../data/constants';
 import * as styles from './J40Map.module.scss';
 import * as COMMON_COPY from '../data/copy/common';
+import * as EXPLORE_COPY from '../data/copy/explore';
 
 
 declare global {
@@ -55,6 +57,11 @@ export interface IDetailViewInterface {
   properties: constants.J40Properties,
 };
 
+export const GEOLOCATION_STATES = {
+  OFF: 'OFF',
+  LOCATING: 'LOCATING',
+  LOCKED: 'LOCKED',
+};
 /**
  * This function will determine the URL for the map tiles. It will read in a string that will designate either
  * high or low tiles. It will allow to overide the URL to the pipeline staging tile URL via feature flag.
@@ -130,12 +137,13 @@ const J40Map = ({location}: IJ40Interface) => {
   const [selectedFeature, setSelectedFeature] = useState<MapboxGeoJSONFeature>();
   const [detailViewData, setDetailViewData] = useState<IDetailViewInterface>();
   const [transitionInProgress, setTransitionInProgress] = useState<boolean>(false);
-  const [geolocationInProgress, setGeolocationInProgress] = useState<boolean>(false);
+  const [geolocationState, setGeolocationState] = useState(GEOLOCATION_STATES.OFF);
   const [isMobileMapState, setIsMobileMapState] = useState<boolean>(false);
   const {width: windowWidth} = useWindowSize();
 
   const mapRef = useRef<MapRef>(null);
   const flags = useFlags();
+  const intl = useIntl();
 
   const selectedFeatureId = (selectedFeature && selectedFeature.id) || '';
   const filter = useMemo(() => ['in', constants.GEOID_PROPERTY, selectedFeatureId], [selectedFeature]);
@@ -322,11 +330,17 @@ const J40Map = ({location}: IJ40Interface) => {
   };
 
   const onGeolocate = () => {
-    setGeolocationInProgress(false);
+    setGeolocationState(GEOLOCATION_STATES.LOCKED);
   };
 
   const onClickGeolocate = () => {
-    setGeolocationInProgress(true);
+    if (geolocationState === GEOLOCATION_STATES.LOCKED) {
+      setGeolocationState(GEOLOCATION_STATES.OFF);
+    }
+
+    if (geolocationState === GEOLOCATION_STATES.OFF) {
+      setGeolocationState(GEOLOCATION_STATES.LOCATING);
+    }
   };
 
   const mapBoxBaseLayer = 'tl' in flags ? `mapbox://styles/justice40/cl2qimpi2000014qeb1egpox8` : `mapbox://styles/mapbox/streets-v11`;
@@ -495,6 +509,12 @@ const J40Map = ({location}: IJ40Interface) => {
             <MapSearch goToPlace={goToPlace}/>
 
             <div className={styles.geolocateBox}>
+              <div
+                className={
+                  geolocationState === GEOLOCATION_STATES.LOCATING ?
+                  styles.geolocateMessage : styles.geolocateMessageHide}>
+                {intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_LOCATING)}
+              </div>
               <div className={styles.geolocateIcon}>
                 <GeolocateControl
                   positionOptions={{enableHighAccuracy: true}}

client/src/data/copy/explore.tsx

@@ -158,6 +158,21 @@ export const MAP = defineMessages({
     defaultMessage: 'US Virgin Islands',
     description: 'On the explore the map page, on the map, the full name indicating the bounds of US Virgin Islands',
   },
+  GEOLOC_MSG_LOCATING: {
+    id: 'explore.map.page.map.geolocation.locating',
+    defaultMessage: 'Geolocating...',
+    description: 'On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is locating.',
+  },
+  // GEOLOC_MSG_OFF: {
+  //   id: 'explore.map.page.map.geolocation.off',
+  //   defaultMessage: 'Geolocation off',
+  //   description: 'On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is off.',
+  // },
+  // GEOLOC_MSG_LOCKED: {
+  //   id: 'explore.map.page.map.geolocation.locked',
+  //   defaultMessage: 'Geolocation locked',
+  //   description: 'On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is locked.',
+  // },
 });
 
 

client/src/intl/en.json

@@ -343,6 +343,10 @@
     "defaultMessage": "Communities identified as disadvantaged by the map are those that are marginalized, underserved, and overburdened by pollution. These communities are at or above the thresholds in one or more of eight categories of criteria.",
     "description": "On the explore the map page, the description of the legend"
   },
+  "explore.map.page.map.geolocation.locating": {
+    "defaultMessage": "Geolocating...",
+    "description": "On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is locating."
+  },
   "explore.map.page.map.search.placeholder.mobile.text": {
     "defaultMessage": "Search locations",
     "description": "On the explore the map page, on the map, the placeholder text for search"

client/src/styles/global.scss

@@ -184,12 +184,51 @@ This section will outline styles that are component specific
 // Maplibre overrides
 // Note that these need to be here to properly override defaults
 
+
+/**
+Geolocate Icon Styling: 
+The icon as 4 states; off, geolocating, locked and off-center. The icon is an SVG made of an 'active' layer and a 'background' layer. The standard styling allows for a clear distinction between the 4 states:
+  - off = black active and black for background
+  - geolocating = blue for active and blue for background (with circular animation)
+  - locked = blue for active and blue for background (no animation)
+  - off-center = blue for background only
+  
+  These states were changed to the following:
+  - off = black active and black for background
+  - geolocating = black for active and black for background (with circular animation)
+  - locked = black for active and black for background
+  - off-center = black for background only
+  
+  The reason the Icon was changed was to match the other overlayed icons - such as territory shortcuts. These other icons don't have multiple states embedded in them. This new color scheme creates ambiguity among two states, namely (off and locked) as they have the same exact style.
+*/
+.mapboxgl-ctrl {
+  button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active { 
+    .mapboxgl-ctrl-icon {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E") !important;
+    }
+  }
+}
+.mapboxgl-ctrl {
+  button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background {
+    .mapboxgl-ctrl-icon {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3C/svg%3E") !important;
+    }
+  }
+}
+
+/**
+Beacon - the beacon's color (*-location-dot) and proximity animation (::before) was changed to black. The reason the beacon was changed was to increase the contrast between the beacon and the census tract layers
+*/
+.mapboxgl-user-location-dot, .mapboxgl-user-location-dot::before  {
+  background-color: #000 !important;  
+}
+
+// Overide mapbox popup styles
 .mapboxgl-popup-close-button {
   font-size: 3em;
   margin-right: 12px;
   margin-top: 15px;
 }
-
 .mapboxgl-popup-content {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5) !important;
   border-radius: 8px !important;