From 73a52022d549ee3b401cea938f40321702c52b2b Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Sat, 4 Apr 2026 17:26:20 +0200
Subject: Update marker design for positions without bearing

---
 src/frontend/app/components/stop/StopMapModal.tsx | 64 ++++++++++++++++-------
 1 file changed, 46 insertions(+), 18 deletions(-)

(limited to 'src/frontend/app/components/stop')

diff --git a/src/frontend/app/components/stop/StopMapModal.tsx b/src/frontend/app/components/stop/StopMapModal.tsx
index 8d3c6f8..0aec0dd 100644
--- a/src/frontend/app/components/stop/StopMapModal.tsx
+++ b/src/frontend/app/components/stop/StopMapModal.tsx
@@ -15,7 +15,7 @@ import "./StopMapModal.css";
 export interface Position {
   latitude: number;
   longitude: number;
-  orientationDegrees?: number | null;
+  bearing?: number | null;
   shapeIndex?: number | null | undefined;
 }
 
@@ -475,26 +475,54 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
                         flexDirection: "column",
                         alignItems: "center",
                         gap: 6,
-                        transform: `rotate(${selectedBus.currentPosition.orientationDegrees}deg)`,
+                        transform: `rotate(${selectedBus.currentPosition.bearing ?? 0}deg)`,
                         transformOrigin: "center center",
                       }}
                     >
-                      <svg
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        style={{
-                          filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
-                        }}
-                      >
-                        <path
-                          d="M12 2 L22 22 L12 17 L2 22 Z"
-                          fill={selectedBus.colour}
-                          stroke="#000"
-                          strokeWidth="2"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
+                      {selectedBus.currentPosition.bearing ? (
+                        <svg
+                          width="24"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          style={{
+                            filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
+                          }}
+                        >
+                          <path
+                            d="M12 2 L22 22 L12 17 L2 22 Z"
+                            fill={selectedBus.colour}
+                            stroke="#000"
+                            strokeWidth="2"
+                            strokeLinejoin="round"
+                          />
+                        </svg>
+                      ) : (
+                        <svg
+                          width="24"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          style={{
+                            filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
+                          }}
+                        >
+                          <rect
+                            x="2"
+                            y="2"
+                            width="20"
+                            height="20"
+                            rx="4"
+                            fill={selectedBus.colour}
+                            stroke="#000"
+                            strokeWidth="2"
+                          />
+                          <path
+                            d="M12 6v3M12 15v3M6 12h3M15 12h3"
+                            stroke="#fff"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                          />
+                        </svg>
+                      )}
                     </div>
                   </Marker>
                 )}
-- 
cgit v1.3