Removing existing features before adding new ones.

src/components/trkseg/Trkseg.tsx

@@ -62,6 +62,7 @@ export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
               coordinates: [trkseg().trkpt[0].$.lon, trkseg().trkpt[0].$.lat],
             },
             properties: { type: 'trkseg-start', id: trksegId },
+            id: `${trksegId}/start`,
           },
           {
             type: 'Feature',
@@ -73,6 +74,7 @@ export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
               ]),
             },
             properties: { type: 'trkseg', id: trksegId },
+            id: trksegId,
           },
           {
             type: 'Feature',
@@ -84,12 +86,19 @@ export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
               ],
             },
             properties: { type: 'trkseg-finish', id: trksegId },
+            id: `${trksegId}/end`,
           },
         ],
       };
 
       const features = new GeoJSON().readFeatures(geo);
       console.log({ caller: 'Trkseg', features });
+      [`${trksegId}/start`, trksegId, `${trksegId}/end`].forEach((id) => {
+        const feature = vectorSource.getFeatureById(id);
+        if (feature) {
+          vectorSource.removeFeature(feature);
+        }
+      });
       vectorSource.addFeatures(features);
     }
   });