Reanbling background geolocation.

src/components/gpx-overlay.tsx

@@ -43,7 +43,7 @@ const GPXOverlay: React.FC<{
           >
           <polyline
             points={trkToPolyline(props.track)}
-            stroke="black" stroke-width="3" fill="none"
+            stroke="black" strokeWidth="3" fill="none"
           ></polyline>
         </svg>
       )}

src/components/live-map.tsx

@@ -38,7 +38,6 @@ const LiveMap: react.FC = () => {
 
   let [track, setTrack] = useState(emptyTrack);
 
-  /*
   useEffect(() => {
     console.log('com.dyomedea.dyomedea  LOG', ' - Adding the watcher');
     BackgroundGeolocation.addWatcher(
@@ -99,10 +98,9 @@ const LiveMap: react.FC = () => {
         if (location !== undefined) {
           setCenter([location.latitude, location.longitude]);
           setPosition([location.latitude, location.longitude]);
-          track.geometry.coordinates.push([
-            location.longitude,
-            location.latitude,
-          ]);
+          track.trkseg[0].trkpt.push({
+            $: { lat: location.latitude, lon: location.longitude },
+          });
           setTrack(track);
         }
 
@@ -117,16 +115,15 @@ const LiveMap: react.FC = () => {
         // When a watcher is no longer needed, it should be removed by calling
         // 'removeWatcher' with an object containing its ID.
         console.log('com.dyomedea.dyomedea  LOG', ' - Watcher added');
-        / *BackgroundGeolocation.removeWatcher({
+        /*BackgroundGeolocation.removeWatcher({
         id: watcher_id,
-      }); * /
+      }); */
       })
       .catch((reason) => {
         console.error('com.dyomedea.dyomedea  LOG', ' - reason: ', reason);
       });
   }, [track]);
 
-  */
   return (
     <Map
       center={center}
@@ -138,7 +135,7 @@ const LiveMap: react.FC = () => {
       animate={true}
     >
       <ZoomControl />
-      <Marker width={20} anchor={center} />
+      <Marker width={20} anchor={position} />
       <GPXOverlay
         mapState={undefined}
         latLngToPixel={undefined}