Merge pull request #47 from TheLinuxGuy-ssh/personal

UI Enhancement towards scientific functionality

Author: TheLinuxGuy-ssh

src/lib/components/MapView.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import { onMount, onDestroy, tick } from "svelte";
   import { allSites, selectedSiteId } from "$lib/stores/sites";
+  import { theme } from "$lib/stores/theme";
   import "leaflet/dist/leaflet.css";
   import type { SiteSummary } from "$lib/stores/sites";
   let container: HTMLDivElement;
   let map: any = null;
   let markers: Map<string, any> = new Map();
+  let currentTileLayer: any = null;
+  let themeUnsub: (() => void) | null = null;
 
   const c: Record<string,string> = { stable: "#34d399", watch: "#fbbf24", critical: "#f87171" };
 
@@ -45,6 +48,19 @@
       maxZoom: 19,
     }).addTo(map);
 
+    themeUnsub = theme.subscribe((t) => {
+      if (!map) return;
+      map.eachLayer((l: any) => { if (l._url) map.removeLayer(l); });
+      const url = t === "light"
+        ? "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
+        : "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png";
+      L.tileLayer(url, {
+        attribution: '&copy; <a href="https://carto.com/">CARTO</a> &copy; <a href="https://openstreetmap.org">OSM</a>',
+        subdomains: "abcd",
+        maxZoom: 19,
+      }).addTo(map);
+    });
+
     function renderMarkers(sites: SiteSummary[]) {
       markers.forEach(m => map.removeLayer(m));
       markers.clear();
@@ -75,7 +91,11 @@
     sitesUnsub = allSites.subscribe(renderMarkers);
 
     selectedUnsub = selectedSiteId.subscribe((id) => {
-      const m = id ? markers.get(id) : null;
+      if (!id) {
+        if (map) map.flyTo([20, 20], 2, { duration: 0.6 });
+        return;
+      }
+      const m = markers.get(id);
       if (m && map) {
         const latlng = m.getLatLng();
         map.flyTo(latlng, 8, { duration: 0.8 });
@@ -87,12 +107,16 @@
   onDestroy(() => {
     sitesUnsub?.();
     selectedUnsub?.();
+    themeUnsub?.();
     map?.remove();
   });
 </script>
 
 <div class="relative z-0 w-full h-full">
   <div class="absolute inset-0 overflow-hidden"><div bind:this={container} class="w-full h-full"></div></div>
+  {#if $theme === "night-vision"}
+    <div class="absolute inset-0 pointer-events-none z-10" style="background: rgba(80,0,0,0.25); mix-blend-mode: multiply;"></div>
+  {/if}
 </div>
 
 <style>