feat(location): implement locate me button

package.json

@@ -97,6 +97,7 @@
     "stylint": "^2.0.0",
     "stylus": "^0.59.0",
     "stylus-supremacy": "^2.14.0",
+    "svg-loaders-react": "^2.2.1",
     "typescript": "^5.0.4",
     "vite": "^4.3.5"
   }

src/scripts/components/main/globe-navigation/globe-navigation.module.styl

@@ -33,3 +33,8 @@
 
   &:hover
     stroke: none
+
+.locateMe
+  margin: 0 emCalc(15px)
+  width: 22px
+  height: 22px

src/scripts/components/main/globe-navigation/globe-navigation.tsx

@@ -1,10 +1,12 @@
-import React, {FunctionComponent} from 'react';
+import React, {FunctionComponent, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
+import {Oval} from 'svg-loaders-react';
 
 import config from '../../../config/main';
 import Button from '../button/button';
 import {CompassIcon} from '../icons/compass-icon';
 import {DownloadIcon} from '../icons/download-icon';
+import {LocationIcon} from '../icons/location-icon';
 import setGlobeProjectionAction from '../../../actions/set-globe-projection';
 import {projectionSelector} from '../../../selectors/globe/projection';
 import setFlyToAction from '../../../actions/set-fly-to';
@@ -15,6 +17,7 @@ import {GlobeProjection} from '../../../types/globe-projection';
 import {LayerListItem} from '../../../types/layer-list';
 
 import styles from './globe-navigation.module.styl';
+import {RenderMode} from '@ubilabs/esa-webgl-globe';
 
 interface Props {
   mainLayer: LayerListItem | null;
@@ -26,6 +29,7 @@ const GlobeNavigation: FunctionComponent<Props> = ({
   compareLayer
 }) => {
   const dispatch = useDispatch();
+  const [locationLoading, setLocationLoading] = useState(false);
   const defaultView = config.globe.view;
   const projectionState = useSelector(projectionSelector);
   const label =
@@ -41,8 +45,41 @@ const GlobeNavigation: FunctionComponent<Props> = ({
     dispatch(setGlobeProjectionAction(newProjection, 2));
   };
 
+  const onLocateMeHandler = () => {
+    setLocationLoading(true);
+
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        position => {
+          const newView = {
+            renderMode: 'globe' as RenderMode.GLOBE,
+            lng: position.coords.longitude,
+            lat: position.coords.latitude,
+            altitude: 0,
+            zoom: 0
+          };
+          dispatch(setFlyToAction(newView));
+          setLocationLoading(false);
+        },
+        error => {
+          console.error(`Error Code = ${error.code} - ${error.message}`);
+        }
+      );
+    }
+  };
+
   return (
     <div className={styles.globeNavigation}>
+      {locationLoading ? (
+        <Oval className={styles.locateMe} />
+      ) : (
+        <Button
+          icon={LocationIcon}
+          className={styles.locateMe}
+          id="locate-me"
+          onClick={() => onLocateMeHandler()}
+        />
+      )}
       <Button
         className={styles.projection}
         id="ui-projection"

src/scripts/components/main/icons/location-icon.tsx

@@ -0,0 +1,11 @@
+import {FunctionComponent} from 'react';
+
+export const LocationIcon: FunctionComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="48"
+    viewBox="0 -960 960 960"
+    width="48">
+    <path d="M450-42v-75q-137-14-228-105T117-450H42v-60h75q14-137 105-228t228-105v-75h60v75q137 14 228 105t105 228h75v60h-75q-14 137-105 228T510-117v75h-60Zm30-134q125 0 214.5-89.5T784-480q0-125-89.5-214.5T480-784q-125 0-214.5 89.5T176-480q0 125 89.5 214.5T480-176Zm0-154q-63 0-106.5-43.5T330-480q0-63 43.5-106.5T480-630q63 0 106.5 43.5T630-480q0 63-43.5 106.5T480-330Zm0-60q38 0 64-26t26-64q0-38-26-64t-64-26q-38 0-64 26t-26 64q0 38 26 64t64 26Zm0-90Z" />
+  </svg>
+);

src/scripts/custom.d.ts

@@ -12,3 +12,5 @@ declare module '*.otf' {
   const content: string;
   export default content;
 }
+
+declare module 'svg-loaders-react';