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;