[Flightpath] Changed to fontawesome sat icon

application/views/satellite/passtable.php

@@ -3,7 +3,7 @@ if (isset($filtered)) {
 	echo '<table style="width:100%" class="satpasstable table-sm table table-bordered table-hover table-striped table-condensed text-center">
 			<thead>
 				<tr id="toptable">
-					<th>' . __("Satellite") . '</th>
+					<th>' . __("Satellite") . ' <i class="fa-solid fa-satellite"></i></th>
 					<th>' . __("AOS Time") . '</th>
 					<th>' . __("LOS Time") . '</th>
 					<th>' . __("Duration") . '</th>

assets/css/general.css

@@ -1054,6 +1054,34 @@ label {
 	border-style: solid;
 }
 
+.satellite-label {
+    background-color: rgb(52, 55, 56) !important;
+    color: rgb(255, 255, 255) !important;
+    border: 1px solid #fff; /* White border */
+    padding: 5px 8px;
+    border-radius: 5px;
+}
+
+/* Modify the tooltip's arrow (triangle) */
+.satellite-label::before {
+    border-top-color: rgb(52, 55, 56) !important; /* Triangle color (matches background) */
+    border-width: 6px; /* Keep same size */
+}
+
+/* Create a white border effect around the triangle */
+.satellite-label::after {
+    content: "";
+    position: absolute;
+    border-style: solid;
+    border-width: 8px; /* Slightly larger than ::before */
+    border-color: white transparent transparent transparent; /* White top border */
+    bottom: -16px; /* Match ::before position */
+    left: 50%;
+    transform: translateX(-50%);
+	z-index: -1;
+}
+
+
 .blank-row {
 	height: 20px !important;
 }

assets/js/sections/flightpath.js

@@ -1,9 +1,12 @@
 var satmarker;
 let maidenhead;
 let leafletMap;
-var icon_dot_url = base_url + "assets/icons/saticon.png";
+let saticon = L.divIcon({
-let saticon = L.icon({ iconUrl: icon_dot_url, iconSize: [30, 30] });
+    html: '<i class="fa-solid fa-satellite" style="font-size: 24px; color: black; -webkit-text-stroke: 1px white;"></i>',
-
+    className: '', // Prevents default Leaflet styles
+    iconSize: [30, 30],
+    iconAnchor: [15, 15] // Center the icon
+});
 let homeicon = L.icon({ iconUrl: icon_home_url, iconSize: [15, 15] });
 
 let observerGd = {
@@ -336,6 +339,15 @@ let sats = (function (L, d3, satelliteJs) {
 		}
 	).addTo(leafletMap).on('click', displayUpComingPasses);
 
+	// Add an always-visible label (tooltip)
+	satmarker.bindTooltip(satellite, {
+		permanent: true,  // Always visible
+		direction: "top", // Position label above the marker
+		offset: [0, -20], // Adjust position
+		className: "satellite-label" // Optional: Custom CSS
+		// className: "leaflet-popup-content-wrapper" // Optional: Custom CSS
+	});
+
 	L.marker(
 		[homelat, homelon], {
 			icon: homeicon,