@zendir/ui 0.2.1 → 0.2.3

package/dist/react/charts/GroundTrackMapLeaflet.js

@@ -4,7 +4,7 @@ import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 /* empty css                   */
 import { geodesicCirclePoints, splitRingAtAntimeridian, segmentsWithWorldCopies, splitPolylineAtAntimeridian } from "./groundTrackMapLeafletUtils.js";
-import { DEFAULT_TILE, CARTO_ATTRIBUTION, OSM_ATTRIBUTION, FALLBACK_TILE } from "./groundTrackMapLeafletTiles.js";
+import { CARTO_ATTRIBUTION, OSM_ATTRIBUTION, TILE_PRESETS, FALLBACK_TILE } from "./groundTrackMapLeafletTiles.js";
 import { useTheme } from "../theme/ThemeProvider.js";
 const STATUS_COLOR_MAP = {
   normal: "#56f000",
@@ -143,13 +143,16 @@ function GroundTrackMapLeaflet({
   showLegend = true,
   showEquator = false,
   showRecenterButton = true,
+  showMapStyleToggle = true,
   defaultCenter = [20, 0],
   defaultZoom = 2,
   height = "100%",
   width = "100%",
   minHeight = "400px",
   emptyMessage = "No orbital data available",
-  tileUrl = DEFAULT_TILE,
+  tileUrl,
+  nightTileUrl,
+  lightSources,
   className = "",
   onSatelliteClick,
   onStationClick,
@@ -167,6 +170,9 @@ function GroundTrackMapLeaflet({
   const controlsRef = useRef([]);
   const pinsGroupRef = useRef(null);
   const [ready, setReady] = useState(false);
+  const [tileStyle, setTileStyle] = useState("dark");
+  const isExplicitTileUrl = tileUrl !== void 0;
+  const effectiveTileUrl = isExplicitTileUrl ? tileUrl : TILE_PRESETS[tileStyle];
   const clearLayers = useCallback(() => {
     var _a;
     const map = mapRef.current;
@@ -200,38 +206,6 @@ function GroundTrackMapLeaflet({
     });
     L.control.zoom({ position: "topright" }).addTo(map);
     map.attributionControl.setPrefix("");
-    const isCartoTiles = tileUrl.includes("cartocdn");
-    if (isCartoTiles) {
-      map.attributionControl.addAttribution(CARTO_ATTRIBUTION);
-    }
-    const tileOptions = {
-      maxZoom: 19,
-      subdomains: isCartoTiles ? "abcd" : "abc",
-      // crossOrigin avoids tainted-canvas errors when Leaflet tries to read tile pixels
-      crossOrigin: true
-    };
-    const tile = L.tileLayer(tileUrl, tileOptions);
-    tile.addTo(map);
-    tileLayerRef.current = tile;
-    let hasSwitchedToFallback = false;
-    const onTileError = () => {
-      if (hasSwitchedToFallback) return;
-      hasSwitchedToFallback = true;
-      tile.off("tileerror", onTileError);
-      tile.remove();
-      if (isCartoTiles) {
-        map.attributionControl.removeAttribution(CARTO_ATTRIBUTION);
-        map.attributionControl.addAttribution(OSM_ATTRIBUTION);
-      }
-      const fallback = L.tileLayer(FALLBACK_TILE, {
-        maxZoom: 19,
-        subdomains: "abc",
-        crossOrigin: true
-      });
-      fallback.addTo(map);
-      tileLayerRef.current = fallback;
-    };
-    tile.on("tileerror", onTileError);
     const overlayGroup = L.layerGroup();
     overlayGroup.addTo(map);
     overlayGroupRef.current = overlayGroup;
@@ -259,11 +233,61 @@ function GroundTrackMapLeaflet({
       mapRef.current = null;
       overlayGroupRef.current = null;
     };
-  }, [tileUrl, clearLayers]);
+  }, [clearLayers]);
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map || !ready) return;
+    if (tileLayerRef.current) {
+      tileLayerRef.current.remove();
+      tileLayerRef.current = null;
+    }
+    try {
+      map.attributionControl.removeAttribution(CARTO_ATTRIBUTION);
+      map.attributionControl.removeAttribution(OSM_ATTRIBUTION);
+    } catch {
+    }
+    const isCartoTiles = effectiveTileUrl.includes("cartocdn");
+    if (isCartoTiles) {
+      map.attributionControl.addAttribution(CARTO_ATTRIBUTION);
+    }
+    const tile = L.tileLayer(effectiveTileUrl, {
+      maxZoom: 19,
+      subdomains: isCartoTiles ? "abcd" : "abc",
+      crossOrigin: true
+    });
+    tile.addTo(map);
+    tile.bringToBack();
+    tileLayerRef.current = tile;
+    let hasSwitchedToFallback = false;
+    const onTileError = () => {
+      if (hasSwitchedToFallback) return;
+      hasSwitchedToFallback = true;
+      tile.off("tileerror", onTileError);
+      tile.remove();
+      const fallback = L.tileLayer(FALLBACK_TILE, {
+        maxZoom: 19,
+        subdomains: "abc",
+        crossOrigin: true
+      });
+      fallback.addTo(map);
+      fallback.bringToBack();
+      tileLayerRef.current = fallback;
+    };
+    tile.on("tileerror", onTileError);
+  }, [effectiveTileUrl, ready]);
   useEffect(() => {
     if (!ready || !mapRef.current) return;
     const map = mapRef.current;
     clearLayers();
+    if (nightTileUrl && showTerminator) {
+      const nightTile = L.tileLayer(nightTileUrl, {
+        maxZoom: 19,
+        crossOrigin: true,
+        opacity: 0.7,
+        className: "zendir-night-tiles"
+      });
+      addLayer(nightTile);
+    }
     if (showTerminator) {
       const now = terminatorTime ?? /* @__PURE__ */ new Date();
       const BAND_STEP = 2;
@@ -297,6 +321,75 @@ function GroundTrackMapLeaflet({
         });
         prevOpacity = b.opacity;
       }
+      const terminatorEdge = calculateTerminatorContinuous(now, 0);
+      if (terminatorEdge.sunset.length > 2) {
+        const sunsetLine = terminatorEdge.sunset.map(([lat, lon]) => [lat, lon]);
+        const sunriseLine = terminatorEdge.sunrise.map(([lat, lon]) => [lat, lon]);
+        [0, 360, -360].forEach((offset) => {
+          addLayer(L.polyline(
+            sunsetLine.map(([lat, lon]) => [lat, lon + offset]),
+            { color: "#5a8ec8", weight: 4, opacity: 0.12, interactive: false, smoothFactor: 1.5 }
+          ));
+          addLayer(L.polyline(
+            sunriseLine.map(([lat, lon]) => [lat, lon + offset]),
+            { color: "#5a8ec8", weight: 4, opacity: 0.12, interactive: false, smoothFactor: 1.5 }
+          ));
+          addLayer(L.polyline(
+            sunsetLine.map(([lat, lon]) => [lat, lon + offset]),
+            { color: "#7aa4d4", weight: 1, opacity: 0.5, interactive: false, smoothFactor: 1.5 }
+          ));
+          addLayer(L.polyline(
+            sunriseLine.map(([lat, lon]) => [lat, lon + offset]),
+            { color: "#7aa4d4", weight: 1, opacity: 0.5, interactive: false, smoothFactor: 1.5 }
+          ));
+        });
+      }
+    }
+    if (lightSources && lightSources.length > 0 && showTerminator) {
+      const now = terminatorTime ?? /* @__PURE__ */ new Date();
+      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;
+      for (const light of lightSources) {
+        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 r = light.radius ?? 4;
+        const intensity = light.intensity ?? 0.8;
+        const color = light.color ?? "#ffeedd";
+        const alpha = intensity * nightFactor;
+        const glowMarker = L.circleMarker([light.latitude, light.longitude], {
+          radius: r * 2,
+          fillColor: color,
+          fillOpacity: alpha * 0.4,
+          color,
+          weight: 0,
+          interactive: !!light.label
+        });
+        addLayer(glowMarker);
+        const coreMarker = L.circleMarker([light.latitude, light.longitude], {
+          radius: Math.max(1, r * 0.5),
+          fillColor: color,
+          fillOpacity: Math.min(1, alpha * 1.2),
+          color: "transparent",
+          weight: 0,
+          interactive: false
+        });
+        addLayer(coreMarker);
+        if (light.label) {
+          glowMarker.bindTooltip(light.label, {
+            permanent: false,
+            direction: "top",
+            className: "zendir-leaflet-tooltip"
+          });
+        }
+      }
     }
     if (showGrid) {
       const gridStyle = { color: "rgba(157, 112, 255, 0.12)", weight: 0.5, interactive: false };
@@ -492,6 +585,8 @@ function GroundTrackMapLeaflet({
     groundStations,
     showTerminator,
     terminatorTime,
+    nightTileUrl,
+    lightSources,
     showGrid,
     showEquator,
     showLegend,
@@ -630,35 +725,109 @@ function GroundTrackMapLeaflet({
             children: emptyMessage
           }
         ),
-        showRecenterButton && /* @__PURE__ */ jsxs(
-          "button",
+        (showRecenterButton || showMapStyleToggle && !isExplicitTileUrl) && /* @__PURE__ */ jsxs(
+          "div",
           {
-            type: "button",
-            onClick: handleRecenter,
-            title: "Recenter map",
-            "aria-label": "Recenter map",
+            className: "zendir-map-controls",
             style: {
               position: "absolute",
-              top: 8,
-              right: 50,
+              bottom: 28,
+              left: 10,
               zIndex: 1e3,
-              background: "rgba(24, 29, 46, 0.9)",
-              border: "1px solid rgba(157, 112, 255, 0.25)",
-              borderRadius: 6,
-              color: "#e4e0f0",
-              cursor: "pointer",
-              padding: "6px 10px",
-              fontSize: 12,
               display: "flex",
-              alignItems: "center",
-              gap: 4
+              flexDirection: "row",
+              gap: 6,
+              alignItems: "flex-end"
             },
             children: [
-              /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
-                /* @__PURE__ */ jsx("path", { d: "M12 2v4M12 18v4M2 12h4M18 12h4" })
-              ] }),
-              "Recenter"
+              showRecenterButton && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleRecenter,
+                  title: "Recenter map to fit all assets and ground stations",
+                  "aria-label": "Recenter map",
+                  style: {
+                    background: "rgba(20, 24, 38, 0.92)",
+                    backdropFilter: "blur(8px)",
+                    WebkitBackdropFilter: "blur(8px)",
+                    border: "1px solid rgba(120, 100, 180, 0.2)",
+                    borderRadius: 4,
+                    color: "#c8c0d8",
+                    cursor: "pointer",
+                    padding: "6px 10px",
+                    fontSize: 11,
+                    fontWeight: 500,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 5,
+                    transition: "background 0.15s, border-color 0.15s",
+                    letterSpacing: "0.02em"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = "rgba(30, 34, 52, 0.95)";
+                    e.currentTarget.style.borderColor = "rgba(157, 112, 255, 0.4)";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "rgba(20, 24, 38, 0.92)";
+                    e.currentTarget.style.borderColor = "rgba(120, 100, 180, 0.2)";
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+                      /* @__PURE__ */ jsx("path", { d: "M12 2v4M12 18v4M2 12h4M18 12h4" })
+                    ] }),
+                    "Recenter"
+                  ]
+                }
+              ),
+              showMapStyleToggle && !isExplicitTileUrl && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    background: "rgba(20, 24, 38, 0.92)",
+                    backdropFilter: "blur(8px)",
+                    WebkitBackdropFilter: "blur(8px)",
+                    border: "1px solid rgba(120, 100, 180, 0.2)",
+                    borderRadius: 4,
+                    display: "flex",
+                    overflow: "hidden"
+                  },
+                  children: ["dark", "satellite"].map((style) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setTileStyle(style),
+                      title: style === "dark" ? "Dark ops map" : "Satellite imagery",
+                      "aria-label": style === "dark" ? "Dark map style" : "Satellite imagery",
+                      "aria-pressed": tileStyle === style,
+                      style: {
+                        background: tileStyle === style ? "rgba(157, 112, 255, 0.22)" : "transparent",
+                        border: "none",
+                        borderRight: style === "dark" ? "1px solid rgba(120, 100, 180, 0.15)" : "none",
+                        color: tileStyle === style ? "#d0c4ee" : "#7a748e",
+                        cursor: "pointer",
+                        padding: "5px 8px",
+                        fontSize: 10,
+                        fontWeight: tileStyle === style ? 600 : 400,
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 4,
+                        transition: "all 0.15s ease",
+                        letterSpacing: "0.02em"
+                      },
+                      children: [
+                        style === "dark" ? /* @__PURE__ */ jsx("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" }) }) : /* @__PURE__ */ jsxs("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                          /* @__PURE__ */ jsx("path", { d: "M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" })
+                        ] }),
+                        style === "dark" ? "Dark" : "Satellite"
+                      ]
+                    },
+                    style
+                  ))
+                }
+              )
             ]
           }
         )