From e032d8814443e9daa5108ff0e29958a78adf084e Mon Sep 17 00:00:00 2001
From: Type-Style <github@type-style.de>
Date: Tue, 27 Aug 2024 11:06:20 +0200
Subject: [PATCH] [Task] #109, line dashed when diff is high, marker start icon
 when diff is higher

---
 src/client/components/Map.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/client/components/Map.tsx b/src/client/components/Map.tsx
index 30b40c6..4b3a892 100644
--- a/src/client/components/Map.tsx
+++ b/src/client/components/Map.tsx
@@ -49,11 +49,17 @@ const MultiColorPolyline = ({ cleanEntries }: { cleanEntries: Models.IEntry[] })
 
 		const correctedColor = toGamut('rgb', 'oklch', null)(color); // map OKLCH to the RGB gamut
 
+		let strokeDashArray = null;
 
+		if (entry.time.diff > 60) { strokeDashArray = "4 8";}
 		return (<Polyline
 			key={entry.time.created * 1.1 + Math.random()} // random to force rerender while new data is incoming (maxSpeed might have changed)
 			positions={[[previousEntry.lat, previousEntry.lon], [entry.lat, entry.lon]]}
-			color={formatCss(correctedColor)} weight={5}
+			color={formatCss(correctedColor)} 
+			weight={5}
+			dashArray={strokeDashArray}
+			lineCap={"butt"}
+			
 		/>)
 	});
 }
@@ -71,7 +77,7 @@ function Map({ entries }: { entries: Models.IEntry[] }) {
 	function createCustomIcon(entry: Models.IEntry) {
 		let className = "";
 		let iconSize = 15;
-		if (entry.index == 0) {
+		if (entry.index == 0 || entry.time.diff >= 300) {
 			className = "start"
 		}
 		if (entry == lastEntry) {