diff --git a/application/views/satellite/passtable.php b/application/views/satellite/passtable.php index 2f871f4d8..6828b7e78 100644 --- a/application/views/satellite/passtable.php +++ b/application/views/satellite/passtable.php @@ -3,7 +3,7 @@ if (isset($filtered)) { echo '
| ' . __("Satellite") . ' | +' . __("Satellite") . ' | ' . __("AOS Time") . ' | ' . __("LOS Time") . ' | ' . __("Duration") . ' | diff --git a/assets/css/general.css b/assets/css/general.css index 7fb24a14d..b8ede0ea5 100644 --- a/assets/css/general.css +++ b/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; } diff --git a/assets/icons/saticon.png b/assets/icons/saticon.png deleted file mode 100644 index e32656299..000000000 Binary files a/assets/icons/saticon.png and /dev/null differ diff --git a/assets/js/sections/flightpath.js b/assets/js/sections/flightpath.js index 97da8887b..743dc019a 100644 --- a/assets/js/sections/flightpath.js +++ b/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.icon({ iconUrl: icon_dot_url, iconSize: [30, 30] }); - +let saticon = L.divIcon({ + html: '', + 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,
|---|