@zendir/ui 0.2.7 → 0.2.9

package/dist/react/charts/GroundTrackMap.d.ts

@@ -217,6 +217,11 @@ export interface GroundTrackMapProps {
      * `enabled` is the new toggle state.
      */
     onLayerChange?: (layerId: string, enabled: boolean) => void;
+    /**
+     * Show sun and moon position markers on the map.
+     * Requires `showTerminator`. Default: true when terminator is enabled.
+     */
+    showCelestialMarkers?: boolean;
 }
-export declare function GroundTrackMap({ groundTrack, satellites, groundStations, accessMask, teamPaths, showTerminator, terminatorTime, showGrid, showLegend, showEquator, showRecenterButton, showMapStyleToggle, isLoading, emptyMessage, width, height, minHeight, defaultCenter, defaultZoom, className, onSatelliteClick, onStationClick, mapProvider, tileUrl, nightTileUrl, lightSources, pins, pinsEditable, onPinAdd, onPinUpdate, onPinRemove, customLayers, onLayerChange, }: GroundTrackMapProps): React.ReactElement;
+export declare function GroundTrackMap({ groundTrack, satellites, groundStations, accessMask, teamPaths, showTerminator, terminatorTime, showGrid, showLegend, showEquator, showRecenterButton, showMapStyleToggle, isLoading, emptyMessage, width, height, minHeight, defaultCenter, defaultZoom, className, onSatelliteClick, onStationClick, mapProvider, tileUrl, nightTileUrl, lightSources, pins, pinsEditable, onPinAdd, onPinUpdate, onPinRemove, customLayers, onLayerChange, showCelestialMarkers, }: GroundTrackMapProps): React.ReactElement;
 export default GroundTrackMap;

package/dist/react/charts/GroundTrackMap.js

@@ -78,11 +78,47 @@ function hexToRgb(hex) {
   }
   return [255, 238, 221];
 }
+function calculateSubSolarPoint(date) {
+  const dayOfYear = Math.floor((date.getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 864e5);
+  const declination = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10));
+  const B = 2 * Math.PI / 365 * (dayOfYear - 81);
+  const eotMinutes = 9.87 * Math.sin(2 * B) - 7.53 * Math.cos(B) - 1.5 * Math.sin(B);
+  const utcHours = date.getUTCHours() + date.getUTCMinutes() / 60 + date.getUTCSeconds() / 3600;
+  const solarHours = utcHours + eotMinutes / 60;
+  const lon = -(solarHours - 12) * 15;
+  return [declination, (lon + 540) % 360 - 180];
+}
+function calculateSubLunarPoint(date) {
+  const J2000 = Date.UTC(2e3, 0, 1, 12, 0, 0);
+  const d = (date.getTime() - J2000) / 864e5;
+  const DEG = Math.PI / 180;
+  const L = (218.316 + 13.176396 * d) % 360;
+  const M = (134.963 + 13.064993 * d) % 360;
+  const F = (93.272 + 13.22935 * d) % 360;
+  const lon_ecl = L + 6.289 * Math.sin(M * DEG);
+  const lat_ecl = 5.128 * Math.sin(F * DEG);
+  const obliquity = 23.439 - 36e-8 * d;
+  const sinRA = Math.sin(lon_ecl * DEG) * Math.cos(obliquity * DEG) - Math.tan(lat_ecl * DEG) * Math.sin(obliquity * DEG);
+  const cosRA = Math.cos(lon_ecl * DEG);
+  let RA = Math.atan2(sinRA, cosRA) / DEG;
+  if (RA < 0) RA += 360;
+  const dec = Math.asin(
+    Math.sin(lat_ecl * DEG) * Math.cos(obliquity * DEG) + Math.cos(lat_ecl * DEG) * Math.sin(obliquity * DEG) * Math.sin(lon_ecl * DEG)
+  ) / DEG;
+  const GMST = (280.46061837 + 360.98564736629 * d) % 360;
+  let geoLon = RA - GMST;
+  geoLon = (geoLon + 540) % 360 - 180;
+  return [dec, geoLon];
+}
 function calculateTerminatorContinuous(date, depressionDeg = 0, numPoints = 360) {
   const dayOfYear = Math.floor((date.getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 864e5);
   const declination = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10));
   const decRad = declination * Math.PI / 180;
-  const hourAngle = (date.getUTCHours() + date.getUTCMinutes() / 60) / 24 * 360 - 180;
+  const B = 2 * Math.PI / 365 * (dayOfYear - 81);
+  const eotMinutes = 9.87 * Math.sin(2 * B) - 7.53 * Math.cos(B) - 1.5 * Math.sin(B);
+  const utcHours = date.getUTCHours() + date.getUTCMinutes() / 60 + date.getUTCSeconds() / 3600;
+  const solarHours = utcHours + eotMinutes / 60;
+  const hourAngle = solarHours / 24 * 360 - 180;
   const depRad = depressionDeg * Math.PI / 180;
   const sunset = [];
   const sunrise = [];
@@ -143,7 +179,8 @@ function GroundTrackMap({
   onPinUpdate,
   onPinRemove,
   customLayers,
-  onLayerChange
+  onLayerChange,
+  showCelestialMarkers
 }) {
   const { tokens } = useTheme();
   const canvasRef = useRef(null);
@@ -309,6 +346,54 @@ function GroundTrackMap({
         }
         ctx.restore();
       }
+      const celestialEnabled = showCelestialMarkers !== void 0 ? showCelestialMarkers : true;
+      if (celestialEnabled) {
+        const [sunLat, sunLon] = calculateSubSolarPoint(now);
+        const sx = lonToX(sunLon, W), sy = latToY(sunLat, H);
+        ctx.save();
+        ctx.shadowColor = "rgba(255, 179, 0, 0.5)";
+        ctx.shadowBlur = 8;
+        ctx.fillStyle = "#FFB300";
+        ctx.strokeStyle = "#FF8F00";
+        ctx.lineWidth = 1.2;
+        ctx.beginPath();
+        ctx.arc(sx, sy, 6, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+        ctx.shadowBlur = 0;
+        ctx.strokeStyle = "rgba(255, 179, 0, 0.85)";
+        ctx.lineWidth = 1.4;
+        for (let a = 0; a < 360; a += 45) {
+          const rad = a * Math.PI / 180;
+          ctx.beginPath();
+          ctx.moveTo(sx + 8 * Math.cos(rad), sy + 8 * Math.sin(rad));
+          ctx.lineTo(sx + 12 * Math.cos(rad), sy + 12 * Math.sin(rad));
+          ctx.stroke();
+        }
+        ctx.restore();
+        const [moonLat, moonLon] = calculateSubLunarPoint(now);
+        const mx = lonToX(moonLon, W), my = latToY(moonLat, H);
+        ctx.save();
+        ctx.shadowColor = "rgba(224, 224, 224, 0.4)";
+        ctx.shadowBlur = 6;
+        ctx.fillStyle = "#e0e0e0";
+        ctx.strokeStyle = "#9e9e9e";
+        ctx.lineWidth = 0.8;
+        ctx.beginPath();
+        ctx.arc(mx, my, 5.5, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+        ctx.shadowBlur = 0;
+        ctx.fillStyle = "rgba(189, 189, 189, 0.5)";
+        ctx.beginPath();
+        ctx.arc(mx - 1.5, my - 1, 1.4, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.fillStyle = "rgba(189, 189, 189, 0.4)";
+        ctx.beginPath();
+        ctx.arc(mx + 2, my + 1.5, 0.9, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      }
     }
     ctx.fillStyle = COLORS.land;
     ctx.strokeStyle = "rgba(100, 120, 160, 0.25)";
@@ -1015,7 +1100,8 @@ function GroundTrackMap({
               onPinUpdate,
               onPinRemove,
               customLayers,
-              onLayerChange
+              onLayerChange,
+              showCelestialMarkers
             }
           )
         }