Removing existing features before adding new ones.

src/components/rte/Rte.tsx

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

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

src/components/wpt/Wpt.tsx

@@ -99,6 +99,10 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
 
       const features = new GeoJSON().readFeatures(geo);
       console.log({ caller: 'Wpt', features });
+      const feature = vectorSource.getFeatureById(wptId);
+      if (feature) {
+        vectorSource.removeFeature(feature);
+      }
       vectorSource.addFeatures(features);
     }
   });