Adding a second vector source (and layer) per GPX to display uncluttered features.

src/components/gpx/Gpx.tsx

@@ -37,16 +37,26 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
     destroyCachedSignal(params);
   });
 
-  const vectorSource = new VectorSource();
-  const vectorLayer = new VectorLayer({
-    source: vectorSource,
-    style,
-    declutter: false,
+  const vectorSources = [new VectorSource(), new VectorSource()];
+  const vectorLayers = [
+    new VectorLayer({
+      source: vectorSources[0],
+      style,
+      declutter: true,
+    }),
+    new VectorLayer({
+      source: vectorSources[1],
+      style,
+      declutter: false,
+    }),
+  ];
+  createEffect(() => {
+    map()?.addLayer(vectorLayers[0]);
+    map()?.addLayer(vectorLayers[1]);
   });
-  createEffect(() => map()?.addLayer(vectorLayer));
 
   createEffect(() => {
-    console.log({ caller: 'Gpx', map: map(), gpxId, gpx: gpx(), vectorLayer });
+    console.log({ caller: 'Gpx', map: map(), gpxId, gpx: gpx(), vectorLayers });
   });
 
   return (
@@ -57,7 +67,7 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
           return (
             <Suspense>
               <Trk
-                vectorSource={vectorSource}
+                vectorSources={vectorSources}
                 trkId={trkId}
                 context={{ gpx, gpxId }}
               />
@@ -71,7 +81,7 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
           return (
             <Suspense>
               <Rte
-                vectorSource={vectorSource}
+                vectorSources={vectorSources}
                 rteId={rteId}
                 context={{ gpx, gpxId }}
               />
@@ -85,7 +95,7 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
           return (
             <Suspense>
               <Wpt
-                vectorSource={vectorSource}
+                vectorSources={vectorSources}
                 wptId={wptId}
                 context={{ gpx, gpxId }}
               />

src/components/rte/Rte.tsx

@@ -10,11 +10,11 @@ import { fromLonLat } from 'ol/proj';
 
 interface Props {
   rteId: string;
-  vectorSource: VectorSource;
+  vectorSources: VectorSource[];
   context: any;
 }
 
-export const Rte: Component<Props> = ({ vectorSource, rteId, context }) => {
+export const Rte: Component<Props> = ({ vectorSources, rteId, context }) => {
   const params = {
     id: rteId,
     method: 'getRte',
@@ -33,7 +33,7 @@ export const Rte: Component<Props> = ({ vectorSource, rteId, context }) => {
   });
 
   createEffect(() => {
-    console.log({ caller: 'Rte', vectorSource, rteId, rte: rte() });
+    console.log({ caller: 'Rte', vectorSources, rteId, rte: rte() });
 
     if (rte() && rte().rtept && rte().rtept.length > 0) {
       let geo: any = {
@@ -92,12 +92,12 @@ export const Rte: Component<Props> = ({ vectorSource, rteId, context }) => {
       const features = new GeoJSON().readFeatures(geo);
       console.log({ caller: 'Rte', features });
       [`${rteId}/start`, rteId, `${rteId}/end`].forEach((id) => {
-        const feature = vectorSource.getFeatureById(id);
+        const feature = vectorSources[0].getFeatureById(id);
         if (feature) {
-          vectorSource.removeFeature(feature);
+          vectorSources[0].removeFeature(feature);
         }
       });
-      vectorSource.addFeatures(features);
+      vectorSources[0].addFeatures(features);
     }
   });
 

src/components/trk/Trk.tsx

@@ -17,10 +17,10 @@ import {
 
 interface Props {
   trkId: string;
-  vectorSource: VectorSource;
+  vectorSources: VectorSource[];
   context: any;
 }
-export const Trk: Component<Props> = ({ vectorSource, trkId, context }) => {
+export const Trk: Component<Props> = ({ vectorSources, trkId, context }) => {
   const params = {
     id: trkId,
     method: 'getTrk',
@@ -33,7 +33,7 @@ export const Trk: Component<Props> = ({ vectorSource, trkId, context }) => {
   });
 
   createEffect(() => {
-    console.log({ caller: 'Trk', vectorSource, trkId, trk: trk() });
+    console.log({ caller: 'Trk', vectorSources, trkId, trk: trk() });
   });
 
   return (
@@ -44,7 +44,7 @@ export const Trk: Component<Props> = ({ vectorSource, trkId, context }) => {
         return (
           <Suspense>
             <Trkseg
-              vectorSource={vectorSource}
+              vectorSources={vectorSources}
               trksegId={trksegId}
               context={{ ...context, trk, trkId }}
             />

src/components/trkseg/Trkseg.tsx

@@ -11,12 +11,12 @@ import { fromLonLat } from 'ol/proj';
 
 interface Props {
   trksegId: string;
-  vectorSource: VectorSource;
+  vectorSources: VectorSource[];
   context: any;
 }
 
 export const Trkseg: Component<Props> = ({
-  vectorSource,
+  vectorSources,
   trksegId,
   context,
 }) => {
@@ -28,10 +28,12 @@ export const Trkseg: Component<Props> = ({
 
   const clearFeatures = () => {
     [`${trksegId}/start`, trksegId, `${trksegId}/end`].forEach((id) => {
-      const feature = vectorSource.getFeatureById(id);
-      if (feature) {
-        vectorSource.removeFeature(feature);
-      }
+      vectorSources.forEach((vectorSource) => {
+        const feature = vectorSource.getFeatureById(id);
+        if (feature) {
+          vectorSource.removeFeature(feature);
+        }
+      });
     });
   };
 
@@ -70,15 +72,17 @@ export const Trkseg: Component<Props> = ({
   createEffect(() => {
     console.log({
       caller: 'Trkseg',
-      vectorSource,
+      vectorSources,
       trksegId,
       trkseg: trkseg(),
       context,
       trk: context.trk(),
     });
 
+    clearFeatures();
+
     if (trkseg() && trkseg().trkpt && trkseg().trkpt.length > 0) {
-      let geo: any = {
+      let geoCluttered: any = {
         type: 'FeatureCollection',
         features: [
           {
@@ -114,6 +118,12 @@ export const Trkseg: Component<Props> = ({
             },
             id: trksegId,
           },
+        ],
+      };
+
+      let geoUnCluttered: any = {
+        type: 'FeatureCollection',
+        features: [
           {
             type: 'Feature',
             geometry: {
@@ -134,10 +144,8 @@ export const Trkseg: Component<Props> = ({
         ],
       };
 
-      const features = new GeoJSON().readFeatures(geo);
-      console.log({ caller: 'Trkseg', features });
-      clearFeatures();
-      vectorSource.addFeatures(features);
+      vectorSources[0].addFeatures(new GeoJSON().readFeatures(geoCluttered));
+      vectorSources[1].addFeatures(new GeoJSON().readFeatures(geoUnCluttered));
     }
   });
 

src/components/wpt/Wpt.tsx

@@ -12,12 +12,12 @@ import { fromLonLat } from 'ol/proj';
 
 interface Props {
   wptId: string;
-  vectorSource: VectorSource;
+  vectorSources: VectorSource[];
   context: any;
 }
 
 export const Wpt: Component<Props> = ({
-  vectorSource,
+  vectorSources,
   wptId: wptId,
   context,
 }) => {
@@ -48,12 +48,12 @@ export const Wpt: Component<Props> = ({
   };
 
   createEffect(() => {
-    console.log({ caller: 'Wpt', vectorSource, wptId, wpt: cloneDeep(wpt()) });
+    console.log({ caller: 'Wpt', vectorSources, wptId, wpt: cloneDeep(wpt()) });
 
     if (wpt()) {
-      const existingFeature = vectorSource.getFeatureById(wptId);
+      const existingFeature = vectorSources[0].getFeatureById(wptId);
       if (existingFeature) {
-        vectorSource.removeFeature(existingFeature);
+        vectorSources[0].removeFeature(existingFeature);
       }
       let geo: any = {
         type: 'FeatureCollection',
@@ -78,11 +78,11 @@ export const Wpt: Component<Props> = ({
 
       const features = new GeoJSON().readFeatures(geo);
       console.log({ caller: 'Wpt', features });
-      const feature = vectorSource.getFeatureById(wptId);
+      const feature = vectorSources[0].getFeatureById(wptId);
       if (feature) {
-        vectorSource.removeFeature(feature);
+        vectorSources[0].removeFeature(feature);
       }
-      vectorSource.addFeatures(features);
+      vectorSources[0].addFeatures(features);
     }
   });