@zendir/ui 0.2.2 → 0.2.4

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

@@ -106,6 +106,20 @@ export interface LightSource {
     /** Optional label shown on hover (Leaflet) or in tooltip (Canvas). */
     label?: string;
 }
+/**
+ * Developer-defined map layer shown in the Layers panel.
+ * The GroundTrackMap does not render the layer content — it only provides
+ * the toggle UI. The consumer app should listen to `onLayerChange` and
+ * render/hide its own overlay accordingly.
+ */
+export interface MapLayerDef {
+    /** Unique identifier for the layer (e.g. 'heatmap', 'coverage') */
+    id: string;
+    /** Display label in the Layers panel */
+    label: string;
+    /** Whether the layer is on by default (default true) */
+    defaultEnabled?: boolean;
+}
 export interface GroundTrackMapProps {
     /** Single satellite ground track (legacy API) */
     groundTrack?: GroundTrackPoint[];
@@ -131,6 +145,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) */
@@ -188,6 +204,19 @@ export interface GroundTrackMapProps {
     onPinUpdate?: (pin: MapPin) => void;
     /** Called when the user removes a pin */
     onPinRemove?: (pinId: string) => void;
+    /**
+     * Custom overlay layers shown in the Layers panel dropdown.
+     * Each layer gets a toggle switch. The GroundTrackMap does NOT render
+     * the layer content — it only provides the toggle UI.
+     * Listen to `onLayerChange` for state updates and render your own overlays.
+     */
+    customLayers?: MapLayerDef[];
+    /**
+     * Called when any layer is toggled (built-in or custom).
+     * `layerId` is one of: 'terminator', 'grid', or a custom layer id.
+     * `enabled` is the new toggle state.
+     */
+    onLayerChange?: (layerId: string, enabled: boolean) => 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, nightTileUrl, lightSources, 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, customLayers, onLayerChange, }: GroundTrackMapProps): React.ReactElement;
 export default GroundTrackMap;

package/dist/react/charts/GroundTrackMap.js

@@ -122,6 +122,7 @@ function GroundTrackMap({
   showLegend = true,
   showEquator = true,
   showRecenterButton = false,
+  showMapStyleToggle = true,
   isLoading = false,
   emptyMessage = "No orbital data available",
   width = "100%",
@@ -140,7 +141,9 @@ function GroundTrackMap({
   pinsEditable = false,
   onPinAdd,
   onPinUpdate,
-  onPinRemove
+  onPinRemove,
+  customLayers,
+  onLayerChange
 }) {
   const { tokens } = useTheme();
   const canvasRef = useRef(null);
@@ -273,6 +276,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)";
@@ -960,6 +996,7 @@ function GroundTrackMap({
               showLegend,
               showEquator,
               showRecenterButton,
+              showMapStyleToggle,
               defaultCenter: leafletDefaultCenter,
               defaultZoom: leafletDefaultZoom,
               height,
@@ -976,7 +1013,9 @@ function GroundTrackMap({
               pinsEditable,
               onPinAdd,
               onPinUpdate,
-              onPinRemove
+              onPinRemove,
+              customLayers,
+              onLayerChange
             }
           )
         }