Styles.

src/components/gpx/styles.ts

@@ -1,7 +1,8 @@
 import { Fill, Text, Icon, Stroke, Style } from 'ol/style';
 import startIcon from '../../icons/flag-start-b-svgrepo-com-green.svg';
 import finishIcon from '../../icons/flag-finish-b-o-svgrepo-com-red.svg';
-import wptIcon from '../../icons/location-pin-svgrepo-com-red.svg';
+import wptIcon from '../../icons/location-pin-svgrepo-com-green.svg';
+import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg';
 import { Feature } from 'ol';
 import memoize from 'memoizee';
 
@@ -17,6 +18,9 @@ const textStroke = new Stroke({
 const textFill = new Fill({
   color: '#000',
 });
+const textFillSel = new Fill({
+  color: 'red',
+});
 
 const styles = {
   default: {
@@ -66,6 +70,22 @@ const styles = {
         width: 3,
       }),
     },
+    wpt: {
+      image: new Icon({
+        src: wptIconSel,
+        scale: 0.1,
+        opacity: 0.9,
+        anchor: [0.5, 1],
+      }),
+      text: (feature: Feature) =>
+        new Text({
+          font: '16px Calibri,sans-serif',
+          text: feature.get('name'),
+          fill: textFillSel,
+          stroke: textStroke,
+          offsetY: -40,
+        }),
+    },
   },
 };
 
@@ -90,15 +110,15 @@ const getStyle = memoize(
     const defaults = styles.default[type];
     const selected = styles.selected[type];
     const all = isSelected ? { ...defaults, ...selected } : { ...defaults };
-    console.log({
+    // console.log({
-      caller: 'style / getStyle',
+    //   caller: 'style / getStyle',
-      type,
+    //   type,
-      isSelected,
+    //   isSelected,
-      params,
+    //   params,
-      defaults,
+    //   defaults,
-      selected,
+    //   selected,
-      all,
+    //   all,
-    });
+    // });
     for (const key of Object.keys(all)) {
       if (all[key] instanceof Function) {
         all[key] = all[key](params);
@@ -112,7 +132,7 @@ const getStyle = memoize(
 export const style = (feature: Feature, resolution: number) => {
   const type = feature.get('type');
   const isSelected = feature.get('isSelected') === true;
-  console.log({ caller: 'style', type, isSelected });
+  // console.log({ caller: 'style', type, isSelected });
   if (styleRequiresFeature(type)) {
     return getStyle(type, isSelected, feature);
   }

src/icons/location-pin-svgrepo-com-blue.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="297" height="297" >
+<g color='blue' fill='blue' >
+	<path d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645
+		c1.936,1.705,4.356,2.559,6.777,2.559c2.421,0,4.841-0.853,6.778-2.559c4.245-3.739,103.975-92.618,103.975-183.645
+		C259.253,49.703,209.57,0,148.5,0z M148.5,272.689c-22.049-21.366-90.243-93.029-90.243-161.892
+		c0-49.784,40.483-90.287,90.243-90.287s90.243,40.503,90.243,90.287C238.743,179.659,170.549,251.322,148.5,272.689z"/>
+	<path d="M148.5,59.183c-28.273,0-51.274,23.154-51.274,51.614c0,28.461,23.001,51.614,51.274,51.614
+		c28.273,0,51.274-23.153,51.274-51.614C199.774,82.337,176.773,59.183,148.5,59.183z M148.5,141.901
+		c-16.964,0-30.765-13.953-30.765-31.104c0-17.15,13.801-31.104,30.765-31.104c16.964,0,30.765,13.953,30.765,31.104
+		C179.265,127.948,165.464,141.901,148.5,141.901z"/>
+</g>
+</svg>

src/icons/location-pin-svgrepo-com-green.svg

@@ -1,14 +1,23 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
+<?xml version="1.0" encoding="iso-8859-1" ?>
-<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+<svg
-	 width="297" height="297" >
+  version="1.1"
-<g color='#228b22' fill='#228b22' >
+  xmlns="http://www.w3.org/2000/svg"
-	<path d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="297"
+  height="297"
+>
+<g color='green' fill='green'>
+	<path
+      d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645
 		c1.936,1.705,4.356,2.559,6.777,2.559c2.421,0,4.841-0.853,6.778-2.559c4.245-3.739,103.975-92.618,103.975-183.645
 		C259.253,49.703,209.57,0,148.5,0z M148.5,272.689c-22.049-21.366-90.243-93.029-90.243-161.892
-		c0-49.784,40.483-90.287,90.243-90.287s90.243,40.503,90.243,90.287C238.743,179.659,170.549,251.322,148.5,272.689z"/>
+		c0-49.784,40.483-90.287,90.243-90.287s90.243,40.503,90.243,90.287C238.743,179.659,170.549,251.322,148.5,272.689z"
-	<path d="M148.5,59.183c-28.273,0-51.274,23.154-51.274,51.614c0,28.461,23.001,51.614,51.274,51.614
+    />
+	<path
+      d="M148.5,59.183c-28.273,0-51.274,23.154-51.274,51.614c0,28.461,23.001,51.614,51.274,51.614
 		c28.273,0,51.274-23.153,51.274-51.614C199.774,82.337,176.773,59.183,148.5,59.183z M148.5,141.901
 		c-16.964,0-30.765-13.953-30.765-31.104c0-17.15,13.801-31.104,30.765-31.104c16.964,0,30.765,13.953,30.765,31.104
-		C179.265,127.948,165.464,141.901,148.5,141.901z"/>
+		C179.265,127.948,165.464,141.901,148.5,141.901z"
+    />
 </g>
 </svg>