Update marker design for positions without bearing

2 files changed, 48 insertions, 25 deletions

diff --git a/src/frontend/app/api/schema.ts b/src/frontend/app/api/schema.ts
index 4d34a44..fe90642 100644
--- a/src/frontend/app/api/schema.ts
+++ b/src/frontend/app/api/schema.ts
@@ -37,7 +37,7 @@ export const ShiftBadgeSchema = z.object({
 export const PositionSchema = z.object({
   latitude: z.number(),
   longitude: z.number(),
-  orientationDegrees: z.number().optional().nullable(),
+  bearing: z.number().optional().nullable(),
   shapeIndex: z.number().optional().nullable(),
 });
 
@@ -174,12 +174,7 @@ export const ConsolidatedCirculationSchema = z.object({
     .optional()
     .nullable(),
   currentPosition: z
-    .object({
-      latitude: z.number(),
-      longitude: z.number(),
-      orientationDegrees: z.number(),
-      shapeIndex: z.number().optional().nullable(),
-    })
+    .object(PositionSchema)
     .optional()
     .nullable(),
   isPreviousTrip: z.boolean().optional().nullable(),
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>
                 )}