diff --git a/static/js/app.js b/static/js/app.js index 0ca2c8d..a94cd9e 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -22,7 +22,7 @@ class SkyView { this.heatmapLayer = null; // UI state - this.currentView = 'map-view'; + this.currentView = 'map'; this.showTrails = false; this.showRange = false; this.showSources = true; @@ -70,26 +70,16 @@ class SkyView { switchView(viewId) { // Update buttons document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active')); - const activeBtn = document.getElementById(`${viewId}-btn`); - if (activeBtn) { - activeBtn.classList.add('active'); - } + document.getElementById(`${viewId}-btn`).classList.add('active'); - // Update views (viewId already includes the full view ID like "map-view") + // Update views document.querySelectorAll('.view').forEach(view => view.classList.remove('active')); - const activeView = document.getElementById(viewId); - if (activeView) { - activeView.classList.add('active'); - } else { - console.warn(`View element not found: ${viewId}`); - return; - } + document.getElementById(`${viewId}-view`).classList.add('active'); this.currentView = viewId; - // Handle view-specific initialization (extract base name for switch) - const baseName = viewId.replace('-view', ''); - switch (baseName) { + // Handle view-specific initialization + switch (viewId) { case 'coverage': this.initializeCoverageMap(); break; @@ -218,7 +208,7 @@ class SkyView { this.updateStatistics(); this.updateHeaderInfo(); - if (this.currentView === 'radar3d-view') { + if (this.currentView === 'radar3d') { this.update3DRadar(); } } @@ -343,50 +333,27 @@ class SkyView { } updateSourceMarkers() { - // Remove markers for sources that no longer exist - const currentSourceIds = new Set(this.sourcesData.keys()); - for (const [id, marker] of this.sourceMarkers) { - if (!currentSourceIds.has(id)) { - this.map.removeLayer(marker); - this.sourceMarkers.delete(id); - } - } + // Clear existing source markers + this.sourceMarkers.forEach(marker => this.map.removeLayer(marker)); + this.sourceMarkers.clear(); - // Update or create markers for current sources + // Add source markers for (const [id, source] of this.sourcesData) { if (source.latitude && source.longitude) { - if (this.sourceMarkers.has(id)) { - // Update existing marker - const marker = this.sourceMarkers.get(id); - - // Update marker style if status changed - marker.setStyle({ - radius: source.active ? 10 : 6, - fillColor: source.active ? '#00d4ff' : '#666666', - fillOpacity: 0.8 - }); - - // Update popup content if it's open - if (marker.isPopupOpen()) { - marker.setPopupContent(this.createSourcePopupContent(source)); - } - } else { - // Create new marker - const marker = L.circleMarker([source.latitude, source.longitude], { - radius: source.active ? 10 : 6, - fillColor: source.active ? '#00d4ff' : '#666666', - color: '#ffffff', - weight: 2, - fillOpacity: 0.8, - className: 'source-marker' - }).addTo(this.map); - - marker.bindPopup(this.createSourcePopupContent(source), { - maxWidth: 300 - }); - - this.sourceMarkers.set(id, marker); - } + const marker = L.circleMarker([source.latitude, source.longitude], { + radius: source.active ? 10 : 6, + fillColor: source.active ? '#00d4ff' : '#666666', + color: '#ffffff', + weight: 2, + fillOpacity: 0.8, + className: 'source-marker' + }).addTo(this.map); + + marker.bindPopup(this.createSourcePopupContent(source), { + maxWidth: 300 + }); + + this.sourceMarkers.set(id, marker); } }