Adding arrows to trksegs.

src/components/gpx/styles.ts

@@ -10,11 +10,14 @@ import cheeseIcon from '../../icons/cheese-svgrepo-com.svg';
 import trainIcon from '../../icons/train-svgrepo-com.svg';
 import picnicIcon from '../../icons/picnic-svgrepo-com.svg';
 import caveIcon from '../../icons/cave-entrance-svgrepo-com.svg';
+import leftArrowIcon from '../../icons/right-arrow-svgrepo-com.svg';
+import blackArrowheadPointingUp from '../../icons/black-arrowhead-pointing-up-svgrepo-com.svg';
 import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg';
 import { Feature } from 'ol';
 import memoize from 'memoizee';
-import { getState } from '../map';
+import { getMap, getState } from '../map';
 import { Point } from 'ol/geom';
+import { Coordinate } from 'ol/coordinate';
 
 interface StyleParameters {
   type: string;
@@ -172,6 +175,7 @@ const styles = {
         image: new Icon(icon),
         text: new Text({
           font: '16px Calibri,sans-serif',
+          overflow: true,
           text: text,
           fill: isSelected ? textFillSel : textFill,
           stroke: isSelected ? textStrokeSel : textStroke,
@@ -184,19 +188,50 @@ const styles = {
     getParameters: (feature: Feature) => {
       return {
         isSelected: feature.get('isSelected') ?? false,
-        feature: zoom() >= 15 ? feature : undefined,
+        feature: zoom() >= 7 ? feature : undefined,
+        zoom: zoom() >= 7 ? Math.floor(zoom()) : undefined,
       };
     },
     getStyle: memoize((params: any) => {
       console.log({ caller: 'getStyle', params });
-      const { isSelected, feature } = params;
+      const { isSelected, feature, zoom } = params;
       const styles = [
         new Style({ stroke: isSelected ? trksegStrokeSel : trksegStroke }),
       ];
       if (feature) {
+        const map = getMap();
         const geometry = feature.getGeometry();
-        geometry.forEachSegment((start: any, end: any) => {
-          styles.push(new Style({ geometry: new Point(end), image: circle }));
+        const coordinates = geometry.getCoordinates();
+        let start = coordinates[0];
+        let startPixels = map?.getPixelFromCoordinate(start);
+        coordinates.slice(1).forEach((end: Coordinate) => {
+          const endPixels = map?.getPixelFromCoordinate(end);
+          if (
+            startPixels !== undefined &&
+            endPixels !== undefined &&
+            Math.sqrt(
+              (startPixels[0] - endPixels[0]) ** 2 +
+                (startPixels[1] - endPixels[1]) ** 2
+            ) > 80
+          ) {
+            const dx = end[0] - start[0];
+            const dy = end[1] - start[1];
+            const rotation = Math.atan2(dy, dx) - Math.PI / 2;
+            styles.push(
+              new Style({
+                geometry: new Point(end),
+                image: new Icon({
+                  src: blackArrowheadPointingUp,
+                  scale: 1 / 20,
+                  anchor: [0.5, 0.5],
+                  rotateWithView: true,
+                  rotation: -rotation,
+                }),
+              })
+            );
+            startPixels = endPixels;
+            start = end;
+          }
         });
       }
       return styles;