@zendir/ui 0.2.1 → 0.2.3

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

@@ -83,6 +83,29 @@ export interface MapPin {
     /** Who placed the pin (display-only; not enforced) */
     createdBy?: string;
 }
+/**
+ * A point light source rendered on the night side of the map.
+ * Use this to display city lights, base locations, RF emitters,
+ * or any glow that should only be visible after sunset.
+ *
+ * Light sources are masked by the terminator — they fade in
+ * through the twilight gradient and reach full brightness in
+ * deep night, matching real-world light-pollution behavior.
+ */
+export interface LightSource {
+    /** Latitude in degrees (−90 … 90) */
+    latitude: number;
+    /** Longitude in degrees (−180 … 180) */
+    longitude: number;
+    /** Glow radius in pixels (default 4). Larger values create wider halos. */
+    radius?: number;
+    /** Glow intensity 0–1 (default 0.8). Controls the peak alpha of the light dot. */
+    intensity?: number;
+    /** Light color — any CSS color string (default '#ffeedd', warm white). */
+    color?: string;
+    /** Optional label shown on hover (Leaflet) or in tooltip (Canvas). */
+    label?: string;
+}
 export interface GroundTrackMapProps {
     /** Single satellite ground track (legacy API) */
     groundTrack?: GroundTrackPoint[];
@@ -108,6 +131,8 @@ export interface GroundTrackMapProps {
     showEquator?: boolean;
     /** Show recenter button (SRO compat) */
     showRecenterButton?: boolean;
+    /** Show a toggle button to switch between Dark and Satellite tile styles. Default true for Leaflet. */
+    showMapStyleToggle?: boolean;
     /** Whether data is still loading (SRO compat) */
     isLoading?: boolean;
     /** Message when there is no data (SRO compat) */
@@ -132,6 +157,25 @@ export interface GroundTrackMapProps {
     mapProvider?: 'leaflet' | 'canvas';
     /** Tile URL for Leaflet (default: CartoDB dark). Ignored when mapProvider is 'canvas'. */
     tileUrl?: string;
+    /**
+     * URL template for a "night" tile layer (e.g. NASA Black Marble, VIIRS city lights).
+     * When provided, this layer is rendered beneath the terminator overlay so that it
+     * appears only on the night side of the map — creating a realistic day/night transition.
+     * The day tiles remain visible on the sunlit side.
+     *
+     * Requires `showTerminator` to be enabled. Leaflet backend only.
+     *
+     * Example: `'https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_CityLights_2012/...'`
+     */
+    nightTileUrl?: string;
+    /**
+     * Array of point light sources rendered on the night side of the map.
+     * Each light appears as a soft glow dot that is masked by the terminator —
+     * invisible in daylight, fading in through twilight, full brightness at night.
+     *
+     * Use cases: city lights, base indicators, RF emitters, targets, population centers.
+     */
+    lightSources?: LightSource[];
     /** Array of user-placed pins displayed on the map */
     pins?: MapPin[];
     /**
@@ -147,5 +191,5 @@ export interface GroundTrackMapProps {
     /** Called when the user removes a pin */
     onPinRemove?: (pinId: string) => void;
 }
-export declare function GroundTrackMap({ groundTrack, satellites, groundStations, accessMask, teamPaths, showTerminator, terminatorTime, showGrid, showLegend, showEquator, showRecenterButton, isLoading, emptyMessage, width, height, minHeight, defaultCenter, defaultZoom, className, onSatelliteClick, onStationClick, mapProvider, tileUrl, pins, pinsEditable, onPinAdd, onPinUpdate, onPinRemove, }: 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, }: GroundTrackMapProps): React.ReactElement;
 export default GroundTrackMap;

package/dist/react/charts/GroundTrackMap.js

@@ -68,6 +68,16 @@ function drawCoverageEllipse(ctx, centerLat, centerLon, radiusDeg, W, H, lonToX,
   }
   ctx.closePath();
 }
+function hexToRgb(hex) {
+  const h = hex.replace("#", "");
+  if (h.length === 3) {
+    return [parseInt(h[0] + h[0], 16), parseInt(h[1] + h[1], 16), parseInt(h[2] + h[2], 16)];
+  }
+  if (h.length >= 6) {
+    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+  }
+  return [255, 238, 221];
+}
 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));
@@ -112,6 +122,7 @@ function GroundTrackMap({
   showLegend = true,
   showEquator = true,
   showRecenterButton = false,
+  showMapStyleToggle = true,
   isLoading = false,
   emptyMessage = "No orbital data available",
   width = "100%",
@@ -124,6 +135,8 @@ function GroundTrackMap({
   onStationClick,
   mapProvider = "leaflet",
   tileUrl,
+  nightTileUrl,
+  lightSources,
   pins,
   pinsEditable = false,
   onPinAdd,
@@ -261,6 +274,39 @@ function GroundTrackMap({
         }
         prevAlpha = zone.alpha;
       }
+      const terminatorEdge = calculateTerminatorContinuous(now, 0);
+      if (terminatorEdge.sunset.length > 2) {
+        ctx.save();
+        ctx.strokeStyle = "rgba(90, 142, 200, 0.12)";
+        ctx.lineWidth = 4;
+        for (const curve of [terminatorEdge.sunset, terminatorEdge.sunrise]) {
+          for (const offset of [-360, 0, 360]) {
+            ctx.beginPath();
+            for (let i = 0; i < curve.length; i++) {
+              const x = lonToX(curve[i][1] + offset, W);
+              const y = latToY(curve[i][0], H);
+              if (i === 0) ctx.moveTo(x, y);
+              else ctx.lineTo(x, y);
+            }
+            ctx.stroke();
+          }
+        }
+        ctx.strokeStyle = "rgba(122, 164, 212, 0.5)";
+        ctx.lineWidth = 1;
+        for (const curve of [terminatorEdge.sunset, terminatorEdge.sunrise]) {
+          for (const offset of [-360, 0, 360]) {
+            ctx.beginPath();
+            for (let i = 0; i < curve.length; i++) {
+              const x = lonToX(curve[i][1] + offset, W);
+              const y = latToY(curve[i][0], H);
+              if (i === 0) ctx.moveTo(x, y);
+              else ctx.lineTo(x, y);
+            }
+            ctx.stroke();
+          }
+        }
+        ctx.restore();
+      }
     }
     ctx.fillStyle = COLORS.land;
     ctx.strokeStyle = "rgba(100, 120, 160, 0.25)";
@@ -483,6 +529,42 @@ function GroundTrackMap({
       ctx.textAlign = "center";
       ctx.fillText(gs.name.length > 14 ? gs.name.slice(0, 14) + "…" : gs.name, x, y + halfIcon + 12);
     }
+    if (lightSources && lightSources.length > 0 && showTerminator) {
+      const now = terminatorTime ?? /* @__PURE__ */ new Date();
+      for (const light of lightSources) {
+        const lx = lonToX(light.longitude, W);
+        const ly = latToY(light.latitude, H);
+        const r = light.radius ?? 4;
+        const intensity = light.intensity ?? 0.8;
+        const color = light.color ?? "#ffeedd";
+        const dayOfYear = Math.floor((now.getTime() - new Date(now.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 = (now.getUTCHours() + now.getUTCMinutes() / 60) / 24 * 360 - 180;
+        const latRad = light.latitude * Math.PI / 180;
+        const sinAlt = Math.sin(latRad) * Math.sin(decRad) + Math.cos(latRad) * Math.cos(decRad) * Math.cos((light.longitude - hourAngle) * Math.PI / 180);
+        const solarAltDeg = Math.asin(sinAlt) * 180 / Math.PI;
+        let nightFactor;
+        if (solarAltDeg >= 0) nightFactor = 0;
+        else if (solarAltDeg <= -18) nightFactor = 1;
+        else nightFactor = Math.min(1, -solarAltDeg / 18);
+        if (nightFactor < 0.01) continue;
+        const alpha = intensity * nightFactor;
+        const [cr, cg, cb] = hexToRgb(color);
+        const grad = ctx.createRadialGradient(lx, ly, 0, lx, ly, r * 2);
+        grad.addColorStop(0, `rgba(${cr}, ${cg}, ${cb}, ${alpha})`);
+        grad.addColorStop(0.4, `rgba(${cr}, ${cg}, ${cb}, ${alpha * 0.6})`);
+        grad.addColorStop(1, `rgba(${cr}, ${cg}, ${cb}, 0)`);
+        ctx.fillStyle = grad;
+        ctx.beginPath();
+        ctx.arc(lx, ly, r * 2, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.fillStyle = `rgba(${cr}, ${cg}, ${cb}, ${Math.min(1, alpha * 1.3)})`;
+        ctx.beginPath();
+        ctx.arc(lx, ly, Math.max(1, r * 0.4), 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
     allSatellites.forEach((sat, satIdx) => {
       const track = sat.groundTrack;
       if (!track || track.length === 0) return;
@@ -791,7 +873,7 @@ function GroundTrackMap({
       ctx.textAlign = "center";
       ctx.fillText(emptyMessage, W / 2, H / 2);
     }
-  }, [allSatellites, groundStations, height, showTerminator, terminatorTime, showGrid, showLegend, showEquator, lonToX, latToY, COLORS, emptyMessage, pins, tokens.colors.accent.primary]);
+  }, [allSatellites, groundStations, height, showTerminator, terminatorTime, showGrid, showLegend, showEquator, lonToX, latToY, COLORS, emptyMessage, pins, lightSources, tokens.colors.accent.primary]);
   const handleMouseMove = useCallback((e) => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -912,6 +994,7 @@ function GroundTrackMap({
               showLegend,
               showEquator,
               showRecenterButton,
+              showMapStyleToggle,
               defaultCenter: leafletDefaultCenter,
               defaultZoom: leafletDefaultZoom,
               height,
@@ -919,6 +1002,8 @@ function GroundTrackMap({
               minHeight,
               emptyMessage,
               tileUrl,
+              nightTileUrl,
+              lightSources,
               className,
               onSatelliteClick,
               onStationClick,