Re-implementing (foreground) geolocation (and npm packages update).

src/components/map/GetLocation.css

@@ -0,0 +1,6 @@
+ion-button.get-location {
+  --opacity: 0.6;
+  --ion-background-color: white;
+  margin-left: calc(50% - 20px);
+}
+

src/components/map/GetLocation.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Geolocation } from '@awesome-cordova-plugins/geolocation';
+
+import './GetLocation.css';
+import { IonButton, IonIcon } from '@ionic/react';
+import { locateOutline } from 'ionicons/icons';
+import { useAtom } from 'jotai';
+import { setCenterAtom } from '../../App';
+
+const GetLocation: React.FC<{}> = () => {
+  const [, setCenter] = useAtom(setCenterAtom);
+
+  const onClickHandler = (event: any) => {
+    console.log('Click handler');
+    Geolocation.getCurrentPosition().then((position) => {
+      console.log(
+        `Click handler, position: ${position.coords.latitude}, ${position.coords.longitude}`
+      );
+      setCenter({
+        lat: position.coords.latitude,
+        lon: position.coords.longitude,
+      });
+    });
+  };
+
+  return (
+    <IonButton
+      onClick={onClickHandler}
+      className='get-location get-position'
+      shape='round'
+      size='small'
+      fill='solid'
+    >
+      <IonIcon slot='icon-only' icon={locateOutline} color='white' />
+    </IonButton>
+  );
+};
+
+export default GetLocation;