feat: added white halo for detour lines and changed color and dash array slightly

Author: Tuvudel

src/map/pinkDetourLeaflet.ts

@@ -35,14 +35,18 @@ export function addDetourPaintToMap(
   map: L.Map,
   pieces: DetourPaintPiece[],
   dashedStyle: L.PolylineOptions,
-  layersOut: L.Layer[]
+  layersOut: L.Layer[],
+  dashedHaloStyle?: L.PolylineOptions
 ): void {
   ensureOffroadLinePane(map);
 
   const offroadPieces: Extract<DetourPaintPiece, { kind: "offroad" }>[] = [];
 
   for (const piece of pieces) {
     if (piece.kind === "road") {
+      if (dashedHaloStyle) {
+        layersOut.push(L.polyline(piece.points as L.LatLngExpression[], dashedHaloStyle).addTo(map));
+      }
       const pl = L.polyline(piece.points as L.LatLngExpression[], dashedStyle).addTo(map);
       layersOut.push(pl);
     } else {

src/pages/MapPage/PinkLineMapPage.tsx

@@ -18,6 +18,7 @@ import {
 } from "../../utils/pinkLineRoute";
 import { addDetourPaintToMap } from "../../map/pinkDetourLeaflet";
 import { pinkDetourGoogleDashedStyle } from "../../map/pinkDetourDashStyle";
+import { proposedLineHaloStyle } from "./mapLineStyles";
 import supabase from "../../supabase";
 import PinkLineNodeForm from "./PinkLineNodeForm";
 import PinkRouteFetchingBanner from "./PinkRouteFetchingBanner";
@@ -280,6 +281,7 @@ const PinkLineMapPage = () => {
       const { solid, dashed, removed } = integratedRoute;
       const solidStyle: L.PolylineOptions = { color: "#FF69B4", weight: 5, opacity: 0.9 };
       const dashedStyle = pinkDetourGoogleDashedStyle;
+      const dashedHaloStyle = proposedLineHaloStyle;
       const removedStyle: L.PolylineOptions = { color: "#FF69B4", weight: 5, opacity: 0.6 };
       const showUserDetours = nodes.length > 0;
 
@@ -295,11 +297,17 @@ const PinkLineMapPage = () => {
       }
       if (showUserDetours) {
         if (integratedRoute.detourPaint && integratedRoute.detourPaint.length > 0) {
-          addDetourPaintToMap(map, integratedRoute.detourPaint, dashedStyle, routeLayersRef.current);
+          addDetourPaintToMap(
+            map,
+            integratedRoute.detourPaint,
+            dashedStyle,
+            routeLayersRef.current,
+            dashedHaloStyle
+          );
         } else {
           for (const pts of dashed) {
-            const layer = L.polyline(pts as L.LatLngExpression[], dashedStyle).addTo(map);
-            routeLayersRef.current.push(layer);
+            routeLayersRef.current.push(L.polyline(pts as L.LatLngExpression[], dashedHaloStyle).addTo(map));
+            routeLayersRef.current.push(L.polyline(pts as L.LatLngExpression[], dashedStyle).addTo(map));
           }
         }
       }

src/pages/MapPage/index.tsx

@@ -17,7 +17,12 @@ import {
 } from "../../utils/pinkLineRoute";
 import { addDetourPaintToMap } from "../../map/pinkDetourLeaflet";
 import { pinkDetourGoogleDashedStyle } from "../../map/pinkDetourDashStyle";
-import { oldLineHaloStyle, oldLineStyle, solidLineStyle } from "./mapLineStyles";
+import {
+  oldLineHaloStyle,
+  oldLineStyle,
+  proposedLineHaloStyle,
+  solidLineStyle,
+} from "./mapLineStyles";
 import { ensureMemorialSitesProjectForUser, loadProjects } from "../../supabase/projects";
 import { PendingSite } from "../../supabase/memorialSites";
 import {
@@ -507,6 +512,7 @@ const MapPage = () => {
       const { solid, dashed, removed } = integratedPinkRoute;
       const solidStyle = solidLineStyle;
       const dashedStyle = pinkDetourGoogleDashedStyle;
+      const dashedHaloStyle = proposedLineHaloStyle;
       const removedStyle = oldLineStyle;
       const removedHaloStyle = oldLineHaloStyle;
       const showPinkDetours = pinkNodes.length > 0;
@@ -522,9 +528,16 @@ const MapPage = () => {
       }
       if (showPinkDetours) {
         if (integratedPinkRoute.detourPaint && integratedPinkRoute.detourPaint.length > 0) {
-          addDetourPaintToMap(map, integratedPinkRoute.detourPaint, dashedStyle, routeLayersRef.current);
+          addDetourPaintToMap(
+            map,
+            integratedPinkRoute.detourPaint,
+            dashedStyle,
+            routeLayersRef.current,
+            dashedHaloStyle
+          );
         } else {
           for (const points of dashed) {
+            routeLayersRef.current.push(L.polyline(points as L.LatLngExpression[], dashedHaloStyle).addTo(map));
             routeLayersRef.current.push(L.polyline(points as L.LatLngExpression[], dashedStyle).addTo(map));
           }
         }

src/pages/MapPage/mapLineStyles.test.ts

@@ -1,11 +1,14 @@
 import { describe, expect, it } from "vitest";
-import { oldLineHaloStyle, oldLineStyle, proposedLineStyle } from "./mapLineStyles";
+import {
+  oldLineHaloStyle,
+  oldLineStyle,
+  proposedLineHaloStyle,
+  proposedLineStyle,
+} from "./mapLineStyles";
 
 describe("map line styles", () => {
-  it("keeps old segment solid gray at full opacity while still weaker than proposed", () => {
+  it("keeps replaced segments solid (no dash) and visually weaker than proposed", () => {
     expect(oldLineStyle.dashArray).toBeUndefined();
-    expect(oldLineStyle.opacity).toBe(1);
-    expect(oldLineStyle.color).toBe("#6D7887");
     expect(oldLineStyle.weight ?? 0).toBeGreaterThanOrEqual(4);
     expect(oldLineStyle.weight ?? 0).toBeLessThan(proposedLineStyle.weight ?? 99);
     expect(proposedLineStyle.dashArray).toBeDefined();
@@ -16,4 +19,10 @@ describe("map line styles", () => {
     expect(oldLineHaloStyle.dashArray).toBeUndefined();
     expect(oldLineHaloStyle.weight ?? 0).toBeGreaterThan(oldLineStyle.weight ?? 0);
   });
+
+  it("uses a solid white halo underlay wider than the dashed proposed line", () => {
+    expect(proposedLineHaloStyle.color?.toLowerCase()).toBe("#ffffff");
+    expect(proposedLineHaloStyle.dashArray).toBeUndefined();
+    expect(proposedLineHaloStyle.weight ?? 0).toBeGreaterThan(proposedLineStyle.weight ?? 0);
+  });
 });

src/pages/MapPage/mapLineStyles.ts

@@ -29,10 +29,19 @@ export const oldLineHaloStyle: PolylineOptions = {
 
 /** New / proposed detour alignment — stronger than old segments. */
 export const proposedLineStyle: PolylineOptions = {
-  color: "#FF4FA3",
+  color: "#ff587b",
   weight: 6,
   opacity: 0.95,
-  dashArray: "4 7",
+  dashArray: "3 7",
+  lineCap: "round",
+  lineJoin: "round",
+};
+
+/** Drawn beneath `proposedLineStyle` polylines for a white halo (solid stroke; dashed line on top). */
+export const proposedLineHaloStyle: PolylineOptions = {
+  color: "#ffffff",
+  weight: 7,
+  opacity: 0.22,
   lineCap: "round",
   lineJoin: "round",
 };