From 37fd31a040e8b7adc3d000920236fd6fc5644edd Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Sun, 27 Nov 2022 17:12:25 +0100
Subject: [PATCH] Displaying trksegs through geojson.

---
 src/components/gpx/Gpx.tsx       | 10 ++++++++--
 src/components/trk/Trk.tsx       |  9 +++++----
 src/components/trkseg/Trkseg.tsx | 30 +++++++++++++++++++++++++++---
 src/db/trkseg.ts                 |  2 +-
 4 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/components/gpx/Gpx.tsx b/src/components/gpx/Gpx.tsx
index cf8b189..61ffe0a 100644
--- a/src/components/gpx/Gpx.tsx
+++ b/src/components/gpx/Gpx.tsx
@@ -5,6 +5,8 @@ import OlMap from 'ol/Map';
 import dispatch from '../../workers/dispatcher-main';
 import Trk from '../trk';
 import getUri from '../../lib/ids';
+import VectorSource from 'ol/source/Vector';
+import VectorLayer from 'ol/layer/Vector';
 
 interface Props {
   gpxId: string;
@@ -23,8 +25,12 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
       })
   );
 
+  const vectorSource = new VectorSource();
+  const vectorLayer = new VectorLayer({ source: vectorSource });
+  createEffect(() => map()?.addLayer(vectorLayer));
+
   createEffect(() => {
-    console.log({ caller: 'Gpx', map: map(), gpxId, gpx: gpx() });
+    console.log({ caller: 'Gpx', map: map(), gpxId, gpx: gpx(), vectorLayer });
   });
 
   return (
@@ -32,7 +38,7 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
     <For each={gpx() ? gpx().trk || [] : []}>
       {(trkId: string) => {
         console.log({ caller: 'Gpx / loop', trkId });
-        return <Trk map={map} trkId={trkId} />;
+        return <Trk vectorSource={vectorSource} trkId={trkId} />;
       }}
     </For>
   );
diff --git a/src/components/trk/Trk.tsx b/src/components/trk/Trk.tsx
index f1d9156..8e794a2 100644
--- a/src/components/trk/Trk.tsx
+++ b/src/components/trk/Trk.tsx
@@ -6,12 +6,13 @@ import dispatch from '../../workers/dispatcher-main';
 import getUri from '../../lib/ids';
 
 import Trkseg from '../trkseg';
+import VectorSource from 'ol/source/Vector';
 
 interface Props {
   trkId: string;
-  map: () => OlMap | null;
+  vectorSource: VectorSource;
 }
-export const Trk: Component<Props> = ({ map, trkId }) => {
+export const Trk: Component<Props> = ({ vectorSource, trkId }) => {
   const [trk] = createResource(
     trkId,
     async () =>
@@ -24,7 +25,7 @@ export const Trk: Component<Props> = ({ map, trkId }) => {
   );
 
   createEffect(() => {
-    console.log({ caller: 'Trk', map: map(), trkId, trk: trk() });
+    console.log({ caller: 'Trk', vectorSource, trkId, trk: trk() });
   });
 
   return (
@@ -32,7 +33,7 @@ export const Trk: Component<Props> = ({ map, trkId }) => {
     <For each={trk() ? trk().trkseg || [] : []}>
       {(trksegId: string) => {
         console.log({ caller: 'Trk / loop', trksegId });
-        return <Trkseg map={map} trksegId={trksegId} />;
+        return <Trkseg vectorSource={vectorSource} trksegId={trksegId} />;
       }}
     </For>
   );
diff --git a/src/components/trkseg/Trkseg.tsx b/src/components/trkseg/Trkseg.tsx
index b918449..b848668 100644
--- a/src/components/trkseg/Trkseg.tsx
+++ b/src/components/trkseg/Trkseg.tsx
@@ -4,13 +4,15 @@ import OlMap from 'ol/Map';
 
 import dispatch from '../../workers/dispatcher-main';
 import getUri from '../../lib/ids';
+import VectorSource from 'ol/source/Vector';
+import GeoJSON from 'ol/format/GeoJSON';
 
 interface Props {
   trksegId: string;
-  map: () => OlMap | null;
+  vectorSource: VectorSource;
 }
 
-export const Trkseg: Component<Props> = ({ map, trksegId }) => {
+export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
   const [trkseg] = createResource(
     trksegId,
     async () =>
@@ -23,7 +25,29 @@ export const Trkseg: Component<Props> = ({ map, trksegId }) => {
   );
 
   createEffect(() => {
-    console.log({ caller: 'Trkseg', map: map(), trksegId, trkseg: trkseg() });
+    console.log({ caller: 'Trkseg', vectorSource, trksegId, trkseg: trkseg() });
+
+    if (trkseg()) {
+      let geo: any = {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            geometry: {
+              type: 'LineString',
+              coordinates: trkseg().trkpt.map((trkpt: any) => [
+                trkpt.$.lon,
+                trkpt.$.lat,
+              ]),
+            },
+          },
+        ],
+      };
+
+      const features = new GeoJSON().readFeatures(geo);
+      console.log({ caller: 'Trkseg', features });
+      vectorSource.addFeatures(features);
+    }
   });
 
   return <></>;
diff --git a/src/db/trkseg.ts b/src/db/trkseg.ts
index 7c2946e..aa13812 100644
--- a/src/db/trkseg.ts
+++ b/src/db/trkseg.ts
@@ -40,7 +40,7 @@ export const getTrkseg = async (params: any) => {
     //level 1
     if (row.doc.type === 'trkpt') {
       target.splice(1);
-      appendToArray(target.at(-1), row.doc.type, row.doc._id);
+      appendToArray(target.at(-1), row.doc.type, row.doc.doc);
       target.push(row.doc.doc);
     }
   });