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({
-      caller: 'style / getStyle',
-      type,
-      isSelected,
-      params,
-      defaults,
-      selected,
-      all,
-    });
+    // console.log({
+    //   caller: 'style / getStyle',
+    //   type,
+    //   isSelected,
+    //   params,
+    //   defaults,
+    //   selected,
+    //   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);
   }