Adding a (non yet operational) control to get the current location.

src/components/get-location/GetLocation.module.css

@@ -0,0 +1,9 @@
+.getLocation {
+  --opacity: 0.6;
+  --ion-background-color: white;
+  margin-left: calc(50% - 20px);
+  position: fixed;
+  bottom: 6px
+  ;
+}
+

src/components/get-location/GetLocation.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+// import { Geolocation } from '@awesome-cordova-plugins/geolocation';
+
+import  style from './GetLocation.module.css';
+import { IonButton, IonIcon } from '@ionic/react';
+import { locateOutline } from 'ionicons/icons';
+// import { useAtom } from 'jotai';
+// import { setCenterAtom } from '../../App';
+// import { locationAtom } from '../map/CurrentLocation';
+
+const GetLocation: React.FC<{}> = () => {
+  // const [, setCenter] = useAtom(setCenterAtom);
+  // const [, setLocation] = useAtom(locationAtom);
+
+  // 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,
+  //     });
+  //     setLocation({
+  //       lat: position.coords.latitude,
+  //       lon: position.coords.longitude,
+  //     });
+  //   });
+  // };
+
+  // onClick={onClickHandler}
+
+  return (
+    <IonButton
+      className={style.getLocation}
+      shape='round'
+      size='small'
+      fill='solid'
+    >
+      <IonIcon slot='icon-only' icon={locateOutline} color='white' />
+    </IonButton>
+  );
+};
+
+export default GetLocation;

src/components/get-location/index.ts

@@ -0,0 +1 @@
+export { default } from './GetLocation';