From bce3bf7204c6f768546d636bff588e13b9bc4afa Mon Sep 17 00:00:00 2001
From: Collin Beczak <ctbeczak08@gmail.com>
Date: Fri, 5 Jun 2026 13:57:15 -0300
Subject: [PATCH] Add persistent directional arrows to task feature LineStrings

Render an arrow marker at every segment midpoint for all LineString and
MultiLineString task features, not only those tagged oneway, so direction
of travel is visible without toggling the feature layer animation.
Honors oneway=-1/reverse for arrow direction.

Also fixes the bundling animation bug: MapAnimator is now memoized so
its animationFunction survives bundle changes (previously a fresh
animator was constructed on every render, wiping the animation function
since setAnimationFunction only re-runs on task.id changes).
---
 src/components/TaskPane/TaskMap/TaskMap.jsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/TaskPane/TaskMap/TaskMap.jsx b/src/components/TaskPane/TaskMap/TaskMap.jsx
index 680b55a27..5cad90036 100644
--- a/src/components/TaskPane/TaskMap/TaskMap.jsx
+++ b/src/components/TaskPane/TaskMap/TaskMap.jsx
@@ -131,7 +131,7 @@ export const TaskMapContent = (props) => {
   };
 
   const features = taskFeatures();
-  const animator = new MapAnimator();
+  const animator = useMemo(() => new MapAnimator(), []);
 
   useMapEvents({
     moveend: () => {
@@ -487,7 +487,8 @@ export const TaskMapContent = (props) => {
     const markers = [];
     const allFeatures = features;
     for (const [featureIndex, feature] of allFeatures.entries()) {
-      if (!feature.properties || !feature.properties.oneway) {
+      const geometryType = feature.geometry?.type;
+      if (geometryType !== "LineString" && geometryType !== "MultiLineString") {
         continue;
       }
 
@@ -496,23 +497,26 @@ export const TaskMapContent = (props) => {
         props.challenge?.taskStyles,
       ).getFinalLayerStyles();
       const coords = coordAll(feature);
-      if (["yes", "true", "1"].indexOf(feature.properties.oneway) !== -1) {
-        for (let i = 0; i < coords.length - 1; i++) {
+      const isReverse =
+        feature.properties && ["-1", "reverse"].indexOf(feature.properties.oneway) !== -1;
+
+      if (isReverse) {
+        for (let i = coords.length - 1; i > 0; i--) {
           markers.push(
             <DirectionalIndicationMarker
               key={`directional-marker-${props.task.id}-${featureIndex}-${i}`}
-              betweenPoints={[point(coords[i]), point(coords[i + 1])]}
+              betweenPoints={[point(coords[i]), point(coords[i - 1])]}
               atMidpoint
               styles={styles}
             />,
           );
         }
-      } else if (["-1", "reverse"].indexOf(feature.properties.oneway) !== -1) {
-        for (let i = coords.length - 1; i > 0; i--) {
+      } else {
+        for (let i = 0; i < coords.length - 1; i++) {
           markers.push(
             <DirectionalIndicationMarker
               key={`directional-marker-${props.task.id}-${featureIndex}-${i}`}
-              betweenPoints={[point(coords[i]), point(coords[i - 1])]}
+              betweenPoints={[point(coords[i]), point(coords[i + 1])]}
               atMidpoint
               styles={styles}
             />,