Displaying a GPX track

src/components/map/map.tsx

@@ -19,6 +19,7 @@ import {
 } from '@ionic/react';
 
 import GpxImport from './gpx-import';
+import Track from './track';
 
 const Map: react.FC<{}> = (props: {}) => {
   const dispatch = useDispatch();
@@ -43,6 +44,7 @@ const Map: react.FC<{}> = (props: {}) => {
           <Slippy>
             <Whiteboard>
               <CurrentLocation />
+              <Track />
             </Whiteboard>
           </Slippy>
           <Layer>

src/components/map/track.tsx

@@ -0,0 +1,30 @@
+import React, { Fragment } from 'react';
+
+import { useSelector } from 'react-redux';
+import { lat2tile, lon2tile } from '../../lib/geo';
+import { zoom0 } from '../../store/map';
+
+const Track: React.FC<{}> = () => {
+  const track = useSelector((state: { tracks: any }) => state.tracks.tracks.$0);
+
+  if (track) {
+    const trkseg = track.trk[0].trkseg[0];
+
+    const d = trkseg.trkpt.reduce(
+      (previous: string, current: any, index: number) => {
+        const action = index === 0 ? 'M' : index === 1 ? 'L' : '';
+        return `${previous} ${action} ${lon2tile(
+          current.$.lon,
+          zoom0
+        )}, ${lat2tile(current.$.lat, zoom0)}`;
+      },
+      ''
+    );
+
+    return <path d={d} className='track'/>;
+  }
+
+  return <Fragment />;
+};
+
+export default Track;