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