Displaying trksegs through geojson.

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>
   );

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>
   );

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 <></>;

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);
     }
   });