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;