Refactoring live-overlay which was using Pigeon's GeoJson component to create a GPXOverlay.

src/components/gpx-overlay.tsx

@@ -0,0 +1,54 @@
+import { Overlay, MapState, Point } from 'pigeon-maps';
+import React from 'react';
+
+const GPXOverlay: React.FC<{
+  mapState: any;
+  latLngToPixel: any;
+  track: any;
+}> = (props: {
+  mapState: MapState;
+  latLngToPixel:
+    | ((
+        latLng: Point,
+        center?: Point | undefined,
+        zoom?: number | undefined
+      ) => Point)
+    | undefined;
+  track: any;
+}) => {
+  const trkToPolyline = (trk: any) => {
+    const latLongs: string[] = trk.trkseg[0].trkpt.map((trkpt: any) => {
+      if (props.latLngToPixel === undefined) {
+        return '';
+      }
+      const point: Point = [trkpt['$'].lat, trkpt['$'].lon];
+      const pixelPoint = props.latLngToPixel(point);
+      if (pixelPoint === undefined) {
+        return '';
+      }
+      return pixelPoint.join(' ');
+    });
+    console.log('latLongs: ' + latLongs);
+    return latLongs.join(' ');
+  };
+
+  return (
+    <Overlay mapState={props.mapState} latLngToPixel={props.latLngToPixel}>
+      {props.mapState.width > 0 && (
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          viewBox={'0 0 ' + props.mapState.width + ' ' + props.mapState.height}
+          width={props.mapState.width}
+          height={props.mapState.height}
+          >
+          <polyline
+            points={trkToPolyline(props.track)}
+            stroke="black" stroke-width="3" fill="none"
+          ></polyline>
+        </svg>
+      )}
+    </Overlay>
+  );
+};
+
+export default GPXOverlay;

src/components/live-map.tsx

@@ -1,7 +1,7 @@
 import react from 'react';
 import { useState, useEffect } from 'react';
 import { Map, Marker, ZoomControl } from 'pigeon-maps';
-import LiveOverlay from './live-overlay';
+import GPXOverlay from './gpx-overlay';
 import { registerPlugin } from '@capacitor/core';
 import { BackgroundGeolocationPlugin } from '@capacitor-community/background-geolocation';
 const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>(
@@ -9,23 +9,36 @@ const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>(
 );
 
 const LiveMap: react.FC = () => {
-  const initialCenter: [number, number] = [44.73574, 6.18981];
+  const initialCenter: [number, number] = [43.57154, 3.94351];
   const initialZoom: number = 15;
   const [center, setCenter] = useState(initialCenter);
   const [position, setPosition] = useState(initialCenter);
   const [zoom, setZoom] = useState(initialZoom);
 
   const emptyTrack: any = {
-    type: 'Feature',
+    trkseg: [
-    geometry: {
+      {
-      type: 'LineString',
+        trkpt: [
-      coordinates: [],
+          {
-    },
+            $: {
-    properties: { foo: 'track' },
+              lat: 43.57154,
+              lon: 3.94351,
+            },
+          },
+          {
+            $: {
+              lat: 43.56922,
+              lon: 3.94228,
+            },
+          },
+        ],
+      },
+    ],
   };
 
   let [track, setTrack] = useState(emptyTrack);
 
+  /*
   useEffect(() => {
     console.log('com.dyomedea.dyomedea  LOG', ' - Adding the watcher');
     BackgroundGeolocation.addWatcher(
@@ -76,30 +89,44 @@ const LiveMap: react.FC = () => {
               BackgroundGeolocation.openSettings();
             }
           }
-          return console.error('com.dyomedea.dyomedea  LOG', ' - error: ', error);
+          return console.error(
+            'com.dyomedea.dyomedea  LOG',
+            ' - error: ',
+            error
+          );
         }
         console.log(location);
         if (location !== undefined) {
           setCenter([location.latitude, location.longitude]);
           setPosition([location.latitude, location.longitude]);
-          track.geometry.coordinates.push([location.longitude, location.latitude]);
+          track.geometry.coordinates.push([
-          setTrack(track);  
+            location.longitude,
+            location.latitude,
+          ]);
+          setTrack(track);
         }
- 
+
-        return console.log('com.dyomedea.dyomedea  LOG', ' - location: ', location);
+        return console.log(
+          'com.dyomedea.dyomedea  LOG',
+          ' - location: ',
+          location
+        );
       }
-    ).then(function after_the_watcher_has_been_added(watcher_id) {
+    )
-      // When a watcher is no longer needed, it should be removed by calling
+      .then(function after_the_watcher_has_been_added(watcher_id) {
-      // 'removeWatcher' with an object containing its ID.
+        // When a watcher is no longer needed, it should be removed by calling
-      console.log('com.dyomedea.dyomedea  LOG', ' - Watcher added');
+        // 'removeWatcher' with an object containing its ID.
-      /*BackgroundGeolocation.removeWatcher({
+        console.log('com.dyomedea.dyomedea  LOG', ' - Watcher added');
+        / *BackgroundGeolocation.removeWatcher({
         id: watcher_id,
-      }); */
+      }); * /
-    }).catch((reason) => {
+      })
-      console.error('com.dyomedea.dyomedea  LOG', ' - reason: ', reason)
+      .catch((reason) => {
-    });
+        console.error('com.dyomedea.dyomedea  LOG', ' - reason: ', reason);
+      });
   }, [track]);
 
+  */
   return (
     <Map
       center={center}
@@ -111,14 +138,12 @@ const LiveMap: react.FC = () => {
       animate={true}
     >
       <ZoomControl />
-      <Marker width={20} anchor={position} />
+      <Marker width={20} anchor={center} />
-      {track.geometry.coordinates.length !== 0 && (
+      <GPXOverlay
-        <LiveOverlay
+        mapState={undefined}
-          mapState={undefined}
+        latLngToPixel={undefined}
-          latLngToPixel={undefined}
+        track={track}
-          track={track}
+      />
-        />
-      )}
     </Map>
   );
 };

src/components/live-overlay.tsx

@@ -1,34 +0,0 @@
-import { GeoJson, MapState, Point } from 'pigeon-maps';
-import React from 'react';
-
-const LiveOverlay: React.FC<{
-  mapState: any;
-  latLngToPixel: any;
-  track: any;
-}> = (props: {
-  mapState: MapState;
-  latLngToPixel:
-    | ((
-        latLng: Point,
-        center?: Point | undefined,
-        zoom?: number | undefined
-      ) => Point)
-    | undefined;
-  track: any;
-}) => {
-
-    
-
-  return (
-    <GeoJson
-      data={{
-        type: 'FeatureCollection',
-        features: [props.track],
-      }}
-      mapState={props.mapState}
-      latLngToPixel={props.latLngToPixel}
-    />
-  );
-};
-
-export default LiveOverlay;