WIP: Begin unified map refactor - HTML structure, storage, CSS, state updates

app/public/app.js

@@ -31,6 +31,16 @@ const STORAGE_KEYS = {
   autoDetect: 'weather.autoDetect',
   showLightning: 'weather.showLightning',
   showWind: 'weather.showWind',
+  showRadarLayer: 'weather.map.radar',
+  showSatelliteLayer: 'weather.map.satellite',
+  showLightningLayer: 'weather.map.lightning',
+  showWindLayer: 'weather.map.wind',
+  showAqiLayer: 'weather.map.aqi',
+  showAlertsLayer: 'weather.map.alerts',
+  showTempMarker: 'weather.map.temp',
+  showSunMoonMarkers: 'weather.map.sunMoon',
+  unifiedMapBaseLayer: 'weather.map.baseLayer',
+  unifiedMapRadarMode: 'weather.map.radarMode',
 };
 
 const state = {
@@ -48,7 +58,23 @@ const state = {
   lastRefreshAt: 0,
   lightningMarkers: [],
   windArrows: [],
+  aqiMarkers: [],
+  alertMarkers: [],
+  tempMarker: null,
+  sunMoonMarkers: [],
   showExtendedForecast: false,
+  unifiedMapLayers: {
+    radar: localStorage.getItem(STORAGE_KEYS.showRadarLayer) !== 'false',
+    satellite: localStorage.getItem(STORAGE_KEYS.showSatelliteLayer) !== 'false',
+    lightning: localStorage.getItem(STORAGE_KEYS.showLightningLayer) !== 'false',
+    wind: localStorage.getItem(STORAGE_KEYS.showWindLayer) !== 'false',
+    aqi: localStorage.getItem(STORAGE_KEYS.showAqiLayer) !== 'false',
+    alerts: localStorage.getItem(STORAGE_KEYS.showAlertsLayer) !== 'false',
+    temp: localStorage.getItem(STORAGE_KEYS.showTempMarker) !== 'false',
+    sunMoon: localStorage.getItem(STORAGE_KEYS.showSunMoonMarkers) !== 'false',
+  },
+  unifiedMapBaseLayer: localStorage.getItem(STORAGE_KEYS.unifiedMapBaseLayer) || 'dark',
+  unifiedMapRadarMode: localStorage.getItem(STORAGE_KEYS.unifiedMapRadarMode) || 'radar',
 };
 
 // ── DOM ──────────────────────────────────────────────────────────────────────
@@ -315,6 +341,7 @@ function renderSavedCities() {
 }
 
 // ── Tab switching ─────────────────────────────────────────────────────────────
+
 function activateTab(tabName) {
   document.querySelectorAll('.tab, .bottom-tab').forEach(t => t.classList.remove('active'));
   document.querySelectorAll('.tab-panel').forEach(p => hide(p));
@@ -322,24 +349,23 @@ function activateTab(tabName) {
   show(document.getElementById('tab-' + tabName));
 
   if (tabName === 'conditions') {
-    setTimeout(() => { radarEmbed.refresh && radarEmbed.refresh(); }, 60);
+    setTimeout(() => { radarEmbed && radarEmbed.refresh && radarEmbed.refresh(); }, 60);
   }
-  if (tabName === 'radar-full') {
-    setTimeout(() => { radarFull.refresh && radarFull.refresh(); }, 50);
-  }
-  if (tabName === 'maps') {
-    setTimeout(refreshMapsOverview, 80);
+  if (tabName === 'unified-map') {
+    setTimeout(() => { unifiedMap && unifiedMap.refresh && unifiedMap.refresh(); }, 50);
   }
 }
-
 document.querySelectorAll('.tab, .bottom-tab').forEach(btn => {
   btn.addEventListener('click', () => activateTab(btn.dataset.tab));
 });
 
-document.getElementById('open-radar-tab').addEventListener('click', () => {
-  activateTab('radar-full');
-});
 
+const openMapTabBtn = document.getElementById('open-map-tab');
+if (openMapTabBtn) {
+  openMapTabBtn.addEventListener('click', () => {
+    activateTab('unified-map');
+  });
+}
 // ── APIs ─────────────────────────────────────────────────────────────────────
 async function geocode(q) {
   const r = await fetch(`/api/geocode?q=${encodeURIComponent(q)}`);