Displaying the current location.

src/App.tsx

@@ -36,7 +36,7 @@ import GetLocation from './components/buttons/GetLocation';
 import { geoPoint } from './components/map/types';
 import Back from './components/buttons/Back';
 import Forward from './components/buttons/Forward';
-import Marker from './components/map/Marker';
+import CurrentLocation from './components/map/CurrentLocation';
 
 setupIonicReact();
 
@@ -63,24 +63,6 @@ const App: React.FC = () => {
   const [scope, setScope] = useAtom(scopeAtom);
 
   console.log(`App, scope: ${JSON.stringify(scope)}`);
-  const marker = (
-    <Marker
-      coordinates={{ lat: -37.8403508, lon: 77.5539501 }}
-      icon={
-        <circle
-          cx={0}
-          cy={0}
-          r={6 / 256}
-          fill='blue'
-          opacity='90%'
-          stroke='white'
-          strokeWidth={3 / 256}
-          strokeOpacity='100%'
-        ></circle>
-      }
-      key='current'
-    />
-  );
   return (
     <IonApp>
       <IonContent fullscreen={true}>
@@ -89,7 +71,7 @@ const App: React.FC = () => {
             scope={scope}
             setScope={debounce(setScope, 1000)}
             numberOfTiledLayers={5}
-            markers={[marker]}
+            markers={[<CurrentLocation key='currentLocation'/>]}
           />
         </IonApp>
       </IonContent>

src/components/buttons/GetLocation.tsx

@@ -7,9 +7,11 @@ 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');
@@ -21,6 +23,10 @@ const GetLocation: React.FC<{}> = () => {
         lat: position.coords.latitude,
         lon: position.coords.longitude,
       });
+      setLocation({
+        lat: position.coords.latitude,
+        lon: position.coords.longitude,
+      });
     });
   };
 

src/components/map/CurrentLocation.tsx

@@ -0,0 +1,40 @@
+import { atom, useAtom } from 'jotai';
+import react from 'react';
+import Marker from './Marker';
+import { geoPoint, TileKeyObject } from './types';
+
+export interface CurrentLocationProperties {
+  keyObject?: TileKeyObject;
+  zoom?: number;
+}
+
+const initialLocation: geoPoint | null = null;
+export const locationAtom = atom<geoPoint | null>(initialLocation);
+
+export const CurrentLocation: react.FC<CurrentLocationProperties> = (
+  props: CurrentLocationProperties
+) => {
+  const [location] = useAtom(locationAtom);
+  return location !== null ? (
+    <Marker
+      key='currentLocation'
+      coordinates={location}
+      icon={
+        <circle
+          cx={0}
+          cy={0}
+          r={8 / 256}
+          fill='blue'
+          opacity='90%'
+          stroke='white'
+          strokeWidth={3 / 256}
+          strokeOpacity='100%'
+        />
+      }
+      keyObject={props.keyObject}
+      zoom={props.zoom}
+    />
+  ) : null;
+};
+
+export default CurrentLocation;

src/components/map/LiveMap.tsx

@@ -1,10 +1,9 @@
-import react, { JSXElementConstructor, ReactComponentElement, ReactElement, ReactNode, useEffect, useState } from 'react';
+import react, { JSXElementConstructor, ReactElement, useEffect, useState } from 'react';
 import useDimensions from 'react-cool-dimensions';
 
 import { MapScope, Point } from './types';
 import Map from './Map';
 import Handlers from './Handlers';
-import Marker from './Marker';
 import { tileProviders } from './tile-providers';
 import { lon2tile, lat2tile, tile2lat, tile2long } from '../../lib/geo';