Moving the map in a component and, trying to make it live, seeing that react-leaflet isn't really... reactive !

(See https://stackoverflow.com/questions/65763931/react-leaflet-update-map-center - basically: most of the map properties are immutable)

src/App.tsx

@@ -19,30 +19,22 @@ import '@ionic/react/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
-/* Leaflet */
 import './theme/leaflet.css';
 
-/* Other imports */
+/* Components */
 
-import {MapContainer, TileLayer, Marker, Popup} from 'react-leaflet' ;
+import LiveMap from './components/live-map'
+import React from 'react';
 
 setupIonicReact();
 
-const position: [number, number]  = [51.505, -0.09];
 
 const App: React.FC = () => (
+
   <IonApp>
-    <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
+    <React.StrictMode>
-        <TileLayer
+      <LiveMap />
-          attribution='{"&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors"}'
+    </React.StrictMode>
-          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        />
-        <Marker position={position}>
-          <Popup>
-            A pretty CSS3 popup. <br /> Easily customizable.
-          </Popup>
-        </Marker>
-      </MapContainer>
    </IonApp>
 );
 

src/components/live-map.tsx

@@ -0,0 +1,37 @@
+import react from "react";
+import { useState, useEffect } from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import { useMap } from 'react-leaflet';
+import { Geolocation } from "@awesome-cordova-plugins/geolocation";
+
+const LiveMap: react.FC = () => {
+  const initialPosition: [number, number] = [44.73574, 6.18981];
+  const [currentPosition, setCurrentposition] = useState(initialPosition);
+  const theMap = useMap();
+
+  useEffect(()=>{
+    Geolocation.getCurrentPosition().then((position) =>
+    {
+      setCurrentposition([position.coords.latitude, position.coords.longitude]);
+      theMap.setView([position.coords.latitude, position.coords.longitude], 13);
+    }
+  );
+
+  }, [])
+ 
+  return (
+    <MapContainer center={initialPosition} zoom={13} scrollWheelZoom={false}>
+      <TileLayer
+        attribution='{"&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors"}'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      <Marker position={currentPosition}>
+        <Popup>
+          A pretty CSS3 popup. <br /> Easily customizable.
+        </Popup>
+      </Marker>
+    </MapContainer>
+  );
+};
+
+export default LiveMap;