Adding context properties to OL features.

src/components/gpx/Gpx.tsx

@@ -83,7 +83,11 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
           console.log({ caller: 'Gpx / loop', trkId });
           return (
             <Suspense>
-              <Trk vectorSource={vectorSource} trkId={trkId} />
+              <Trk
+                vectorSource={vectorSource}
+                trkId={trkId}
+                context={{ gpx, gpxId }}
+              />
             </Suspense>
           );
         }}
@@ -93,7 +97,11 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
           console.log({ caller: 'Gpx / loop', rteId });
           return (
             <Suspense>
-              <Rte vectorSource={vectorSource} rteId={rteId} />
+              <Rte
+                vectorSource={vectorSource}
+                rteId={rteId}
+                context={{ gpx, gpxId }}
+              />
             </Suspense>
           );
         }}
@@ -103,7 +111,11 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
           console.log({ caller: 'Gpx / loop', wptId });
           return (
             <Suspense>
-              <Wpt vectorSource={vectorSource} wptId={wptId} />
+              <Wpt
+                vectorSource={vectorSource}
+                wptId={wptId}
+                context={{ gpx, gpxId }}
+              />
             </Suspense>
           );
         }}

src/components/rte/Rte.tsx

@@ -7,9 +7,10 @@ import GeoJSON from 'ol/format/GeoJSON';
 interface Props {
   rteId: string;
   vectorSource: VectorSource;
+  context: any;
 }
 
-export const Rte: Component<Props> = ({ vectorSource, rteId }) => {
+export const Rte: Component<Props> = ({ vectorSource, rteId, context }) => {
   const [rte, setRte] = createSignal<Rte>();
   const [dispatchId, setDispatchId] = createSignal<number>(-1);
 
@@ -61,7 +62,11 @@ export const Rte: Component<Props> = ({ vectorSource, rteId }) => {
               type: 'Point',
               coordinates: [rte().rtept[0].$.lon, rte().rtept[0].$.lat],
             },
-            properties: { type: 'rte-start', id: rteId },
+            properties: {
+              type: 'rte-start',
+              id: rteId,
+              context: { ...context, rte, rteId },
+            },
             id: `${rteId}/start`,
           },
           {
@@ -73,19 +78,24 @@ export const Rte: Component<Props> = ({ vectorSource, rteId }) => {
                 rtept.$.lat,
               ]),
             },
-            properties: { type: 'rte', id: rteId },
+            properties: {
-            id:rteId
+              type: 'rte',
+              id: rteId,
+              context: { ...context, rte, rteId },
+            },
+            id: rteId,
           },
           {
             type: 'Feature',
             geometry: {
               type: 'Point',
-              coordinates: [
+              coordinates: [rte().rtept.at(-1).$.lon, rte().rtept.at(-1).$.lat],
-                rte().rtept.at(-1).$.lon,
+            },
-                rte().rtept.at(-1).$.lat,
+            properties: {
-              ],
+              type: 'rte-finish',
+              id: rteId,
+              context: { ...context, rte, rteId },
             },
-            properties: { type: 'rte-finish', id: rteId },
             id: `${rteId}/end`,
           },
         ],

src/components/trk/Trk.tsx

@@ -19,8 +19,9 @@ import VectorSource from 'ol/source/Vector';
 interface Props {
   trkId: string;
   vectorSource: VectorSource;
+  context: any;
 }
-export const Trk: Component<Props> = ({ vectorSource, trkId }) => {
+export const Trk: Component<Props> = ({ vectorSource, trkId, context }) => {
   const [trk, setTrk] = createSignal<Trk>();
   const [dispatchId, setDispatchId] = createSignal<number>(-1);
 
@@ -70,7 +71,11 @@ export const Trk: Component<Props> = ({ vectorSource, trkId }) => {
         console.log({ caller: 'Trk / loop', trksegId });
         return (
           <Suspense>
-            <Trkseg vectorSource={vectorSource} trksegId={trksegId} />
+            <Trkseg
+              vectorSource={vectorSource}
+              trksegId={trksegId}
+              context={{ ...context, trk, trkId }}
+            />
           </Suspense>
         );
       }}

src/components/trkseg/Trkseg.tsx

@@ -7,9 +7,14 @@ import GeoJSON from 'ol/format/GeoJSON';
 interface Props {
   trksegId: string;
   vectorSource: VectorSource;
+  context: any;
 }
 
-export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
+export const Trkseg: Component<Props> = ({
+  vectorSource,
+  trksegId,
+  context,
+}) => {
   const [trkseg, setTrkseg] = createSignal<Trkseg>();
   const [dispatchId, setDispatchId] = createSignal<number>(-1);
 
@@ -61,7 +66,11 @@ export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
               type: 'Point',
               coordinates: [trkseg().trkpt[0].$.lon, trkseg().trkpt[0].$.lat],
             },
-            properties: { type: 'trkseg-start', id: trksegId },
+            properties: {
+              type: 'trkseg-start',
+              id: trksegId,
+              context: { ...context, trkseg, trksegId },
+            },
             id: `${trksegId}/start`,
           },
           {
@@ -73,7 +82,11 @@ export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
                 trkpt.$.lat,
               ]),
             },
-            properties: { type: 'trkseg', id: trksegId },
+            properties: {
+              type: 'trkseg',
+              id: trksegId,
+              context: { ...context, trkseg, trksegId },
+            },
             id: trksegId,
           },
           {
@@ -85,7 +98,11 @@ export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
                 trkseg().trkpt.at(-1).$.lat,
               ],
             },
-            properties: { type: 'trkseg-finish', id: trksegId },
+            properties: {
+              type: 'trkseg-finish',
+              id: trksegId,
+              context: { ...context, trkseg, trksegId },
+            },
             id: `${trksegId}/end`,
           },
         ],

src/components/wpt/Wpt.tsx

@@ -11,6 +11,7 @@ import { Box, Button, Stack, TextField } from '@suid/material';
 interface Props {
   wptId: string;
   vectorSource: VectorSource;
+  context: any;
 }
 
 enum Mode {
@@ -18,7 +19,11 @@ enum Mode {
   EDIT,
 }
 
-export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
+export const Wpt: Component<Props> = ({
+  vectorSource,
+  wptId: wptId,
+  context,
+}) => {
   const [t, { add, locale, dict }] = useI18n();
 
   const [wpt, setWpt] = createSignal<Wpt>();
@@ -91,7 +96,14 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
               type: 'Point',
               coordinates: [wpt()?.$.lon, wpt()?.$.lat],
             },
-            properties: { type: 'wpt', ...wpt(), id: wptId, getTitle, edit },
+            properties: {
+              type: 'wpt',
+              ...wpt(),
+              id: wptId,
+              getTitle,
+              edit,
+              context: { ...context, wpt, wptId },
+            },
             id: wptId,
           },
         ],