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

Switch to light map theme by default with dark mode toggle

Browse source 
Major improvements to map theming and aircraft type display:

Map Theme Changes:
- Changed default map from dark to light theme (CartoDB Positron)
- Added night mode toggle button with sun/moon icons
- Both main map and coverage map now switch themes together
- Light theme provides better daylight visibility

Aircraft Type Display:
- Now displays actual ADS-B category directly (e.g., "Medium 34000-136000kg")
- Removed guessing/interpretation of aircraft types
- Icons still use simplified categories for visual distinction
- More accurate and standards-compliant display

This provides a cleaner, more professional appearance with the light map
and gives users accurate ADS-B category information instead of interpreted types.

🤖 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 15:09:54 +02:00
commit b527f5a8ee
4 changed files with 66 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

41
assets/static/js/modules/map-manager.js
View file

@ -15,6 +15,11 @@ export class MapManager {
// Data references
this.sourcesData = new Map();
// Map theme
this.isDarkMode = false;
this.currentTileLayer = null;
this.coverageTileLayer = null;
}
async initializeMap() {
@ -34,8 +39,8 @@ export class MapManager {
this.map = L.map('map').setView([origin.latitude, origin.longitude], 10);
// Dark tile layer
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
// Light tile layer by default
this.currentTileLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
@ -59,7 +64,7 @@ export class MapManager {
this.coverageMap = L.map('coverage-map').setView([origin.latitude, origin.longitude], 10);
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
this.coverageTileLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.coverageMap);
}
@ -223,6 +228,36 @@ export class MapManager {
return this.showSources;
}
toggleDarkMode() {
this.isDarkMode = !this.isDarkMode;
const lightUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
const darkUrl = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
const tileUrl = this.isDarkMode ? darkUrl : lightUrl;
const tileOptions = {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
};
// Update main map
if (this.map && this.currentTileLayer) {
this.map.removeLayer(this.currentTileLayer);
this.currentTileLayer = L.tileLayer(tileUrl, tileOptions).addTo(this.map);
}
// Update coverage map
if (this.coverageMap && this.coverageTileLayer) {
this.coverageMap.removeLayer(this.coverageTileLayer);
this.coverageTileLayer = L.tileLayer(tileUrl, {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.coverageMap);
}
return this.isDarkMode;
}
// Coverage map methods
updateCoverageControls() {
const select = document.getElementById('coverage-source');