From 3856e4b5161eea43117cfd8cecc68e677edd4f86 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Thu, 22 Sep 2022 23:05:50 +0200
Subject: [PATCH] Displaying a GPX track

---
 src/components/map/map.tsx   |  2 ++
 src/components/map/track.tsx | 30 ++++++++++++++++++++++++++++++
 src/lib/geo.ts               |  5 +++--
 src/theme/map.css            |  7 +++++++
 4 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/components/map/track.tsx

diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index 59d3abf..d305ee1 100644
--- a/src/components/map/map.tsx
+++ b/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>
diff --git a/src/components/map/track.tsx b/src/components/map/track.tsx
new file mode 100644
index 0000000..b9347b2
--- /dev/null
+++ b/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;
diff --git a/src/lib/geo.ts b/src/lib/geo.ts
index 2c24d1d..989ac9d 100644
--- a/src/lib/geo.ts
+++ b/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) *
diff --git a/src/theme/map.css b/src/theme/map.css
index 74e4aa5..8c5e5e9 100644
--- a/src/theme/map.css
+++ b/src/theme/map.css
@@ -20,4 +20,11 @@ ion-button.get-location {
 	overflow: hidden;
 	position: absolute;
 	z-index: -1;
+}
+
+.track {
+  fill: transparent;
+  stroke-width: 2px;
+  stroke: green;
+  vector-effect: non-scaling-stroke;
 }
\ No newline at end of file