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;

src/lib/geo.ts

@@ -10,13 +10,14 @@ export interface geoPoint {
 
 // cf https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_(JavaScript/ActionScript,_etc.)
 export const lon2tile = (lon: number, zoom: number) => {
-  return ((lon + 180) / 360) * Math.pow(2, zoom);
+  return ((Number(lon) + 180) / 360) * Math.pow(2, zoom);
 };
 export const lat2tile = (lat: number, zoom: number) => {
   return (
     ((1 -
       Math.log(
-        Math.tan((lat * Math.PI) / 180) + 1 / Math.cos((lat * Math.PI) / 180)
+        Math.tan((Number(lat) * Math.PI) / 180) +
+          1 / Math.cos((Number(lat) * Math.PI) / 180)
       ) /
         Math.PI) /
       2) *

src/theme/map.css

@@ -21,3 +21,10 @@ ion-button.get-location {
 	position: absolute;
 	z-index: -1;
 }
+
+.track {
+  fill: transparent;
+  stroke-width: 2px;
+  stroke: green;
+  vector-effect: non-scaling-stroke;
+}