feat: add direction arrows to polyline

mapper/src/App.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import * as leaflet from 'leaflet';
-import { MapContainer, Polyline, TileLayer, useMap, useMapEvents } from 'react-leaflet';
+import 'leaflet-polylinedecorator';
+import { MapContainer, TileLayer, useMap, useMapEvents } from 'react-leaflet';
 import Datetime from 'react-datetime';
 import 'react-datetime/css/react-datetime.css';
 import axios from 'axios';
@@ -129,6 +130,58 @@ function MapViewManager({ coords, mapState, setMapState, loading, setSubmenu })
     return null;
 }
 
+function PolylineWithArrows({ coords }) {
+    const map = useMap();
+    const polylineRef = useRef(null);
+    const decoratorRef = useRef(null);
+
+    useEffect(() => {
+        if (polylineRef.current) {
+            map.removeLayer(polylineRef.current);
+        }
+        if (decoratorRef.current) {
+            map.removeLayer(decoratorRef.current);
+        }
+
+        if (coords && coords.length > 1) {
+            const polyline = leaflet.polyline(coords, { color: 'blue' });
+            polylineRef.current = polyline;
+            map.addLayer(polyline);
+
+            const decorator = leaflet.polylineDecorator(polyline, {
+                patterns: [
+                    {
+                        offset: 25,
+                        repeat: 100,
+                        symbol: leaflet.Symbol.arrowHead({
+                            pixelSize: 15,
+                            polygon: false,
+                            pathOptions: {
+                                stroke: true,
+                                color: 'blue',
+                                weight: 3
+                            }
+                        })
+                    }
+                ]
+            });
+            decoratorRef.current = decorator;
+            map.addLayer(decorator);
+        }
+
+        return () => {
+            if (polylineRef.current) {
+                map.removeLayer(polylineRef.current);
+            }
+            if (decoratorRef.current) {
+                map.removeLayer(decoratorRef.current);
+            }
+        };
+    }, [coords, map]);
+
+    return null;
+}
+
 function Map({end, duration, slider, mapState, setMapState, setSubmenu}) {
 	const [data, loading] = useSensor('owntracks', 'OwnTracks', end, duration);
 
@@ -189,7 +242,7 @@ function Map({end, duration, slider, mapState, setMapState, setSubmenu}) {
 								attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 								url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea'
 							/>
-							<Polyline pathOptions={{color: 'blue'}} positions={coords} />
+							<PolylineWithArrows coords={coords} />
 						</MapContainer>
 					)
 				: