olemd/skyview
1
0
Fork 0
Code Issues 12 Pull requests Projects Releases 11 Packages Wiki Activity Actions

Fix source popup closing immediately after opening

Browse source 
Problem: Source markers were being recreated on every WebSocket update
(every second), which destroyed any open popups.

Solution: Modified updateSourceMarkers() to:
- Only remove markers for sources that no longer exist
- Update existing markers in-place instead of recreating them
- Preserve open popups by updating content instead of recreating markers
- Only create new markers when sources are actually added

This ensures that clicking on a source marker opens a popup that stays
open for user interaction, similar to aircraft popups.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2025-08-24 00:06:59 +02:00
commit 5a4f9e2e20
1 changed files with 41 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

59
static/js/app.js
View file

@ -333,27 +333,50 @@ class SkyView {
} }
updateSourceMarkers() { updateSourceMarkers() {
// Clear existing source markers // Remove markers for sources that no longer exist
this.sourceMarkers.forEach(marker => this.map.removeLayer(marker)); const currentSourceIds = new Set(this.sourcesData.keys());
this.sourceMarkers.clear(); for (const [id, marker] of this.sourceMarkers) {
if (!currentSourceIds.has(id)) {
this.map.removeLayer(marker);
this.sourceMarkers.delete(id);
}
}
// Add source markers // Update or create markers for current sources
for (const [id, source] of this.sourcesData) { for (const [id, source] of this.sourcesData) {
if (source.latitude && source.longitude) { if (source.latitude && source.longitude) {
const marker = L.circleMarker([source.latitude, source.longitude], { if (this.sourceMarkers.has(id)) {
radius: source.active ? 10 : 6, // Update existing marker
fillColor: source.active ? '#00d4ff' : '#666666', const marker = this.sourceMarkers.get(id);
color: '#ffffff',
weight: 2, // Update marker style if status changed
fillOpacity: 0.8, marker.setStyle({
className: 'source-marker' radius: source.active ? 10 : 6,
}).addTo(this.map); fillColor: source.active ? '#00d4ff' : '#666666',
fillOpacity: 0.8
marker.bindPopup(this.createSourcePopupContent(source), { });
maxWidth: 300
}); // Update popup content if it's open
if (marker.isPopupOpen()) {
this.sourceMarkers.set(id, marker); 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);
}
} }
} }