Adding Wpt names.

src/components/gpx/styles.ts

@@ -1,7 +1,7 @@
-import { Circle, Fill, Icon, Stroke, Style } from 'ol/style';
+import { Circle, 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.svg';
+import wptIcon from '../../icons/location-pin-svgrepo-com-green.svg';
 import { Feature } from 'ol';
 
 const trackStrokeStyle = new Stroke({
@@ -30,11 +30,28 @@ const wptImageStyle = new Icon({
   anchor: [0.5, 1],
 });
 
+const textStroke = new Stroke({
+  color: '#fff',
+  width: 3,
+});
+const textFill = new Fill({
+  color: '#000',
+});
+
+const wptTextStyle = (feature: Feature) =>
+  new Text({
+    font: '12px Calibri,sans-serif',
+    text: feature.get('name'),
+    fill: textFill,
+    stroke: textStroke,
+  });
+
 const trtksegStyle = new Style({ stroke: trackStrokeStyle });
 const trtksegStartStyle = new Style({ image: trtksegStartImageStyle });
 const trtksegFinishStyle = new Style({ image: trtksegFinishImageStyle });
 
-const wptStyle = new Style({ image: wptImageStyle });
+const wptStyle = (feature: Feature) =>
+  new Style({ image: wptImageStyle, text: wptTextStyle(feature) });
 
 export const style = (feature: Feature, resolution: number) => {
   const type = feature.get('type');
@@ -48,7 +65,7 @@ export const style = (feature: Feature, resolution: number) => {
     return trtksegFinishStyle;
   }
   if (type === 'wpt') {
-    return wptStyle;
+    return wptStyle(feature);
   }
 };
 

src/components/wpt/Wpt.tsx

@@ -37,7 +37,7 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
               type: 'Point',
               coordinates: [wpt().$.lon, wpt().$.lat],
             },
-            properties: { type: 'wpt' },
+            properties: { type: 'wpt', ...wpt() },
           },
         ],
       };