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';

src/components/map/Map.tsx

@@ -3,18 +3,36 @@ import OlMap from 'ol/Map';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
 import Attribution from 'ol/control/Attribution';
-import OSM, { ATTRIBUTION } from 'ol/source/OSM';
+import Rotate from 'ol/control/Rotate';
+import ScaleLine from 'ol/control/ScaleLine';
+import Control from 'ol/control/Control';
+import OSM from 'ol/source/OSM';
 
 import './Map.css';
 import Collection from 'ol/Collection';
+import { createPortal } from 'react-dom';
+import GetLocation from '../get-location';
 
 export interface MapProperties {}
 
 export const Map: React.FC<MapProperties> = (props: MapProperties) => {
   const target = useRef<HTMLDivElement>(null);
 
+  const getLocation = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
-    const controls = new Collection([new Attribution({ collapsible: true })]);
+    // const getLocation = target.current
+    //   ? createPortal(<GetLocation />, target.current)
+    //   : null;
+
+    console.log({ caller: 'Map / useEffect', target, getLocation });
+
+    const controls = new Collection([
+      new Attribution({ collapsible: true }),
+      new Rotate(),
+      new ScaleLine({ bar: true }),
+      new Control({ element: getLocation.current ?? undefined }),
+    ]);
     const map = new OlMap({
       view: new View({
         center: [0, 0],
@@ -30,7 +48,14 @@ export const Map: React.FC<MapProperties> = (props: MapProperties) => {
     });
   }, []);
 
-  return <div ref={target} className='ol-map' />;
+  return (
+    <>
+      <div ref={getLocation}>
+        <GetLocation />
+      </div>
+      <div ref={target} className='ol-map'></div>
+    </>
+  );
 };
 
 export default Map;