feat: represent bearing as geographic terms

src/pages/components/map-related/MapLayers/BusToolTip.tsx

@@ -33,6 +33,23 @@
       .finally(() => setIsLoading(false))
   }, [position])
 
+  function getDirectionFromAngle(angle: number): string {
+    // Normalize the angle to the range 0-360
+    angle = ((angle % 360) + 360) % 360;
+
+    // Define the cardinal directions in clockwise order
+    const directions: string[] = [
+      "North", "Northeast", "East", "Southeast",
+      "South", "Southwest", "West", "Northwest"
+    ];
+
+    // Divide the angle into 8 equal sections (45 degrees each)
+    const index: number = Math.round(angle / 45) % 8;
+
+    return directions[index];
+  } 
+
+
   return (
     <div className={cn('bus-tooltip', { hebrew: i18n.language === 'he' })}>
       {isLoading || !siriRide ? (
@@ -83,7 +100,8 @@
               <li>
                 {`${t('drive_direction')}: `}
                 <span>
-                  ({position.point?.bearing} {t('bearing')})
+                  {/* ({position.point?.bearing} {t('bearing')}) */}
+                  {position.point?.bearing} {t('bearing')} ({position.point?.bearing !== undefined ? getDirectionFromAngle(position.point.bearing) : t('unknown', { defaultValue: 'unknown' })}) 
                 </span>
               </li>
               <li>