Displaying GPX tracks (1st attempt)

src/components/map/Gpx.tsx

@@ -0,0 +1,47 @@
+import react, { useEffect, useState } from 'react';
+import dispatch from '../../workers/dispatcher-main';
+import Trk from './Trk';
+import { TileKeyObject, Rectangle } from './types';
+import getUri from '../../lib/ids';
+
+export interface GpxProperties {
+  id: string;
+  keyObject: TileKeyObject;
+  zoom: number;
+  viewPort: Rectangle;
+}
+
+export const Gpx: react.FC<GpxProperties> = (props: GpxProperties) => {
+  const [gpx, setGpx] = useState<any>([]);
+  useEffect(() => {
+    const getGpx = async () => {
+      const gpx = await dispatch({
+        action: 'getGpx',
+        params: {
+          id: props.id,
+        },
+      });
+      console.log(`<Gpx>, gpx: ${JSON.stringify(gpx)}`);
+      setGpx(gpx);
+    };
+    getGpx();
+  }, [props.id]);
+
+  return (
+    <g>
+      {gpx
+        .filter((row: any) => row.doc.type === 'trk')
+        .map((row: any) => (
+          <Trk
+            key={row.id}
+            id={row.id}
+            keyObject={props.keyObject}
+            zoom={props.zoom}
+            viewPort={props.viewPort}
+          />
+        ))}
+    </g>
+  );
+};
+
+export default Gpx;

src/components/map/Gpxes.tsx

@@ -1,5 +1,6 @@
 import react, { useEffect, useState } from 'react';
 import dispatch from '../../workers/dispatcher-main';
+import Gpx from './Gpx';
 import { TileKeyObject, Rectangle } from './types';
 
 export interface GpxesProperties {
@@ -30,7 +31,19 @@ export const Gpxes: react.FC<GpxesProperties> = (props: GpxesProperties) => {
     props.viewPort?.topLeft.y,
     props.keyObject?.zoomLevel,
   ]);
-  return <></>;
+  return (
+    <>
+      {visibleGpxes.map((id: string) => (
+        <Gpx
+          key={id}
+          id={id}
+          keyObject={props.keyObject!}
+          zoom={props.zoom!}
+          viewPort={props.viewPort!}
+        />
+      ))}
+    </>
+  );
 };
 
 export default Gpxes;

src/components/map/Trk.tsx

@@ -0,0 +1,47 @@
+import react, { useEffect, useState } from 'react';
+import dispatch from '../../workers/dispatcher-main';
+import { TileKeyObject, Rectangle } from './types';
+import getUri from '../../lib/ids';
+import Trkseg from './Trkseg';
+
+export interface TrkProperties {
+  id: string;
+  keyObject: TileKeyObject;
+  zoom: number;
+  viewPort: Rectangle;
+}
+
+export const Trk: react.FC<TrkProperties> = (props: TrkProperties) => {
+  const [trk, setTrk] = useState<any>([]);
+  useEffect(() => {
+    const getTrk = async () => {
+      const trk = await dispatch({
+        action: 'getTrk',
+        params: {
+          id: props.id,
+        },
+      });
+      console.log(`<Trk>, gpx: ${JSON.stringify(trk)}`);
+      setTrk(trk);
+    };
+    getTrk();
+  }, [props.id]);
+
+  return (
+    <g>
+      {trk
+        .filter((row: any) => row.doc.type === 'trkseg')
+        .map((row: any) => (
+          <Trkseg
+            key={row.id}
+            id={row.id}
+            keyObject={props.keyObject}
+            zoom={props.zoom}
+            viewPort={props.viewPort}
+          />
+        ))}
+    </g>
+  );
+};
+
+export default Trk;

src/components/map/Trkseg.module.css

@@ -0,0 +1,8 @@
+.track {
+  fill: transparent;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke: rgba(10, 1, 51, 0.8);
+  vector-effect: non-scaling-stroke;
+}

src/components/map/Trkseg.tsx

@@ -0,0 +1,74 @@
+import react, { useEffect, useState } from 'react';
+import { lon2tile, lat2tile } from '../../lib/geo';
+import dispatch from '../../workers/dispatcher-main';
+import { TileKeyObject, Rectangle } from './types';
+
+import css from './Trkseg.module.css';
+
+export interface TrksegProperties {
+  id: string;
+  keyObject: TileKeyObject;
+  zoom: number;
+  viewPort: Rectangle;
+}
+
+export const Trkseg: react.FC<TrksegProperties> = (props: TrksegProperties) => {
+  const [trkseg, setTrkseg] = useState<any>([]);
+  useEffect(() => {
+    const getTrkseg = async () => {
+      const trk = await dispatch({
+        action: 'getTrkseg',
+        params: {
+          id: props.id,
+        },
+      });
+      console.log(`<Trkseg>, gpx: ${JSON.stringify(trk)}`);
+      setTrkseg(trk);
+    };
+    getTrkseg();
+  }, [props.id]);
+
+  const d = trkseg
+    .slice(1)
+    .reduce((previous: string, current: any, index: number) => {
+      const action = index === 0 ? 'M' : index === 1 ? 'L' : '';
+      const trkpt = current.doc.doc;
+      return `${previous} ${action} ${lon2tile(
+        trkpt.$.lon,
+        props.keyObject.zoomLevel
+      )}, ${lat2tile(trkpt.$.lat, props.keyObject.zoomLevel)}`;
+    }, '');
+
+  const widthFactor = () => {
+    return 2;
+    if (props.keyObject.zoomLevel <= 12) {
+      return 2;
+    }
+    if (props.keyObject.zoomLevel <= 17) {
+      return 4;
+    }
+
+    if (props.keyObject.zoomLevel <= 18) {
+      return 8;
+    }
+    if (props.keyObject.zoomLevel <= 19) {
+      return 16;
+    }
+
+    return 64;
+  };
+
+  // style={{ strokeWidth: widthFactor() / 256 / props.zoom }}
+  return (
+    <g>
+      <path
+        d={d}
+        pointerEvents='none'
+        className={css.track}
+        
+      />
+    </g>
+  );
+};
+
+export default Trkseg;