diff options
| author | Ariel Costas Guerrero <ariel@costas.dev> | 2026-04-04 17:26:20 +0200 |
|---|---|---|
| committer | Ariel Costas Guerrero <ariel@costas.dev> | 2026-04-04 17:35:34 +0200 |
| commit | 73a52022d549ee3b401cea938f40321702c52b2b (patch) | |
| tree | c1fd67df2afe71262a95dc1eb39625014920f6fd /src/frontend/app/components | |
| parent | c558c8b6134df3b65d984430b58cffa26eb0b297 (diff) | |
Update marker design for positions without bearing
Diffstat (limited to 'src/frontend/app/components')
| -rw-r--r-- | src/frontend/app/components/stop/StopMapModal.tsx | 64 |
1 files changed, 46 insertions, 18 deletions
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> )} |