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;

src/components/map/Map.tsx

@@ -46,8 +46,11 @@ const [getState, setState] = createSignal({
 
 export { getState };
 
+const [getMap, setMap] = createSignal<OlMap | null>(null);
+
+export { getMap };
+
 const Map: Component = () => {
-  const [getMap, setMap] = createSignal<OlMap | null>(null);
   const params = useParams();
   const navigate = useNavigate();
 

src/components/map/index.ts

@@ -1 +1 @@
-export { default, getState } from './Map';
+export { default, getState, getMap } from './Map';

src/icons/black-arrowhead-pointing-up-svgrepo-com.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="238" height="238"
+	style="enable-background:new 0 0 237.64 237.64;" xml:space="preserve">
+<g>
+	<path style="fill:#010002;" d="M7.954,226.53c-2.23,4.623-2.295,8.072-0.609,9.915c3.911,4.275,15.926-3.905,23.323-9.051
+		l58.416-40.662c7.397-5.145,20.402-11.835,29.414-11.993c0.897-0.016,1.8-0.011,2.703,0.011c9.007,0.218,21.958,7.016,29.3,12.238
+		l56.403,40.151c7.343,5.221,19.303,13.473,23.301,9.219c1.74-1.849,1.751-5.33-0.381-9.997L129.648,7.047
+		c-4.264-9.333-11.335-9.404-15.79-0.163L7.954,226.53z"/>
+</g>
+
+</svg>

src/icons/right-arrow-svgrepo-com.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="490" height="490"
+	 style="enable-background:new 0 0 490 490;" xml:space="preserve">
+<g>
+	<path d="M486.936,245L3.064,0l148.887,245L3.064,490L486.936,245z M84.7,75.554L419.343,245L84.7,414.446L187.671,245L84.7,75.554z
+		"/>
+</g>
+
+</svg>