"Trying pigeon-maps as an alternative to react-leaflet +leaflet and it seems much easier (and reactive).

src/App.tsx

@@ -19,8 +19,6 @@ import '@ionic/react/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
-import './theme/leaflet.css';
-
 /* Components */
 
 import LiveMap from './components/live-map'

src/components/live-map.tsx

@@ -1,37 +1,26 @@
 import react from "react";
 import { useState, useEffect } from "react";
-import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
-import { useMap } from 'react-leaflet';
+import { Map, Marker } from "pigeon-maps"
 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>
-  );
+    <Map center={currentPosition} defaultZoom={11}>
+      <Marker width={50} anchor={currentPosition} />
+    </Map>
+   );
 };
 
 export default LiveMap;

src/theme/leaflet.css

@@ -1,4 +0,0 @@
-.leaflet-container {
-  width: 100%;
-  height: 100vh;
-}