diff --git a/src/App.tsx b/src/App.tsx
index ce379c8..ae02b69 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,31 +19,23 @@ 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 = () => (
+
-
-
-
-
- A pretty CSS3 popup.
Easily customizable.
-
-
-
-
+
+
+
+
);
export default App;
diff --git a/src/components/live-map.tsx b/src/components/live-map.tsx
new file mode 100644
index 0000000..54d973b
--- /dev/null
+++ b/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 (
+
+
+
+
+ A pretty CSS3 popup.
Easily customizable.
+
+
+
+ );
+};
+
+export default LiveMap;