Hiking trails styles

src/components/gpx/styles.ts

@@ -121,16 +121,6 @@ const rteStrokeSel = new Stroke({
   width: 3,
 });
 
-const routeStroke = new Stroke({
-  color: '#d221db',
-  width: 5,
-});
-
-const routeStrokeSel = new Stroke({
-  color: '#ae21db',
-  width: 3,
-});
-
 const circleFill = new Fill({
   color: 'rgba(255,255,255,0.4)',
 });
@@ -291,17 +281,38 @@ const styles = {
     }, memoizeOptions),
   },
   LineString: {
+    strokes: {
+      iwn: new Stroke({
+        color: [174, 33, 219, 0.8],
+        width: 6,
+      }),
+      nwn: new Stroke({
+        color: [174, 33, 219, 0.8],
+        width: 4,
+      }),
+      rwn: new Stroke({
+        color: [174, 33, 219, 0.8],
+        width: 4,
+        lineDash: [10, 10],
+      }),
+      lwn: new Stroke({
+        color: [174, 33, 219, 0.8],
+        width: 2,
+        lineDash: [10, 10],
+      }),
+    },
     getParameters: (feature: Feature) => {
       return {
         isSelected: feature.get('isSelected') ?? false,
         name: feature.get('name'),
+        network: feature.get('network'),
       };
     },
     getStyle: memoize((params: any) => {
       console.log({ caller: 'getStyle', params });
-      const { isSelected, name } = params;
+      const { isSelected, name, network } = params;
       return new Style({
-        stroke: isSelected ? routeStrokeSel : routeStroke,
+        stroke: styles.LineString.strokes[network],
         text: new Text({
           text: name,
           font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',