Displaying last position of each gpx

src/components/gpx/styles.ts

@@ -257,6 +257,29 @@ const styles = {
       return styles;
     }, memoizeOptions),
   },
+  'trkseg-finish': {
+    getParameters: (feature: Feature) => {
+      const positions: Set<string> = feature.get('positions');
+      return {
+        isLast: positions.has('gpx-end') && positions.has('trk-end'),
+      };
+    },
+    getStyle: memoize((params: any) => {
+      //      console.log({ caller: 'getStyle', params });
+      const { isLast } = params;
+      if (isLast) {
+        return new Style({
+          image: new Icon({
+            src: wptIcon,
+            scale: 1 / 15,
+            opacity: 0.9,
+            anchor: [0.5, 1],
+          }),
+        });
+      }
+      return null;
+    }, memoizeOptions),
+  },
   rte: {
     getParameters: (feature: Feature) => {
       return {

src/components/trkseg/Trkseg.tsx

@@ -35,19 +35,47 @@ export const Trkseg: Component<Props> = ({
     });
   };
 
+  const positions = () => {
+    let result = new Set<string>();
+    if (context.trk && context.gpx) {
+      const trkId = context.trkId;
+      if (trkId === context.gpx().trk.at(0)) {
+        result.add('gpx-start');
+      }
+      if (trkId === context.gpx().trk.at(-1)) {
+        result.add('gpx-end');
+      }
+      if (trksegId === context.trk().trkseg.at(0)) {
+        result.add('trk-start');
+      }
+      if (trksegId === context.trk().trkseg.at(-1)) {
+        result.add('trk-end');
+      }
+    }
+    return result;
+  };
+
   onCleanup(() => {
     console.log({
       caller: 'Trkseg / onCleanup',
       trksegId,
       trkseg: trkseg(),
       params,
+      context,
     });
     destroyCachedSignal(params);
     clearFeatures();
   });
 
   createEffect(() => {
-    console.log({ caller: 'Trkseg', vectorSource, trksegId, trkseg: trkseg() });
+    console.log({
+      caller: 'Trkseg',
+      vectorSource,
+      trksegId,
+      trkseg: trkseg(),
+      context,
+      trk: context.trk(),
+    });
 
     if (trkseg() && trkseg().trkpt && trkseg().trkpt.length > 0) {
       let geo: any = {
@@ -66,6 +94,7 @@ export const Trkseg: Component<Props> = ({
               type: 'trkseg-start',
               id: trksegId,
               context: { ...context, trkseg, trksegId },
+              positions: positions(),
             },
             id: `${trksegId}/start`,
           },
@@ -81,6 +110,7 @@ export const Trkseg: Component<Props> = ({
               type: 'trkseg',
               id: trksegId,
               context: { ...context, trkseg, trksegId },
+              positions: positions(),
             },
             id: trksegId,
           },
@@ -97,6 +127,7 @@ export const Trkseg: Component<Props> = ({
               type: 'trkseg-finish',
               id: trksegId,
               context: { ...context, trkseg, trksegId },
+              positions: positions(),
             },
             id: `${trksegId}/end`,
           },