From 7e7e1ced44979e90a61e9d5bec2339a872edfa05 Mon Sep 17 00:00:00 2001
From: Erik Bohnsack <erikbohnsack@users.noreply.github.com>
Date: Wed, 14 Jan 2026 14:31:30 +0100
Subject: [PATCH] feat(mission-control): add local geo layers to map

Add functionality to mission-control tab so that users can
either load or drag&drop Geo files (KML, GeoJSON, GPX) to the
visualization of the map. Use open layers native layers
functionality for the visualization.
---
 locale/en/messages.json         |  18 ++
 src/css/tabs/mission_planer.css |  24 ++-
 tabs/mission_control.html       |  22 +++
 tabs/mission_control.js         | 327 ++++++++++++++++++++++++++++++++
 4 files changed, 389 insertions(+), 2 deletions(-)

diff --git a/locale/en/messages.json b/locale/en/messages.json
index 2ebe889e7..3841c8506 100644
--- a/locale/en/messages.json
+++ b/locale/en/messages.json
@@ -6195,6 +6195,24 @@
     "gpsAssistnowLoadDataError": {
         "message": "Error loading AssistNow data."
     },
+    "layerManagementTitle": {
+        "message": "Map Layer Management"
+    },
+    "layerLoadGeoFile": {
+        "message": "Load GEO File"
+    },
+    "layerDragDropHint": {
+        "message": "or drag & drop GEO files onto the map"
+    },
+    "layerConfirmDelete": {
+        "message": "Are you sure you want to delete this layer?"
+    },
+    "layerLoadError": {
+        "message": "Error loading GEO file. Please check the file format."
+    },
+    "layerParseError": {
+        "message": "Error parsing GEO file. Unsupported format or corrupted data."
+    },
     "adsbVehicleTotalMessages": {
         "message": "Vehicle msgs"
     },
diff --git a/src/css/tabs/mission_planer.css b/src/css/tabs/mission_planer.css
index 28527c46b..ec6a19518 100644
--- a/src/css/tabs/mission_planer.css
+++ b/src/css/tabs/mission_planer.css
@@ -317,14 +317,22 @@
     top: 140px;
 }
 
-.geozone-settings {
+.mission-control-layers {
     top: 165px;
     left: .5em;
 }
-.ol-touch .geozone-settings {
+.ol-touch .mission-control-layers {
     top: 165px;
 }
 
+.geozone-settings {
+    top: 190px;
+    left: .5em;
+}
+.ol-touch .geozone-settings {
+    top: 190px;
+}
+
 .tab-mission-control .geozoneVerticesTable {
     width: 100%;
     text-align: center;
@@ -592,4 +600,16 @@
     width: 90%;
     height: 90%;
     padding-bottom: 5px;
+}
+
+.tab-mission-control .layer-item {
+    transition: background-color 0.2s;
+}
+
+.tab-mission-control .layer-item:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+.tab-mission-control #geo_info {
+    transition: opacity 0.2s;
 }
\ No newline at end of file
diff --git a/tabs/mission_control.html b/tabs/mission_control.html
index 1a389d1bf..62087556f 100644
--- a/tabs/mission_control.html
+++ b/tabs/mission_control.html
@@ -74,6 +74,27 @@
                     </div>
                 </div>
 
+                <div id="missionPlannerLayers" class="gui_box grey" style="display: none">
+                    <div class="gui_box_titlebar">
+                        <div class="spacer_box_title" data-i18n="layerManagementTitle"></div>
+                        <div class="btnMenu btnMenuIcon save_btn">
+                            <a id="cancelLayers" class="ic_cancel" href="#" i18n_title="missionTitleCancel"></a>
+                        </div>
+                    </div>
+                    <div class="spacer" id="layerContent">
+                        <div class="btn save_btn" style="margin-bottom: 10px;">
+                            <a id="loadGeoFileButton" class="btnicon ic_loadFromFile" href="#" 
+                               title="Load GEO File (KML, GeoJSON, GPX)"></a>
+                        </div>
+                        <hr>
+                        <div id="layerListContainer" style="padding: 0 5px;"></div>
+                        <hr>
+                        <div style="text-align: center; color: #888; font-size: 0.9em; margin-top: 10px;">
+                            <span data-i18n="layerDragDropHint"></span>
+                        </div>
+                    </div>
+                </div>
+
                 <div id="missionPlannerSettings" class="gui_box grey" style="display: none">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" data-i18n="missionDefaultSettingsHead"></div>
@@ -570,6 +591,7 @@
             </div>
         </div>
         <div class="cf_column threefourth_left" style="height: 100%;">
+            <div id="geo_info" style="display: block; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: white; padding: 5px 10px; border-radius: 4px; font-size: 0.9em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 80%; pointer-events: none; z-index: 1000;">&nbsp;</div>
             <div id="missionMap"></div>
             <div id="missionPlannerElevation" class="gui_box grey" style="display: none">
                 <div class="gui_box_titlebar">
diff --git a/tabs/mission_control.js b/tabs/mission_control.js
index c0042f566..c79fdd8a9 100644
--- a/tabs/mission_control.js
+++ b/tabs/mission_control.js
@@ -24,6 +24,8 @@ import Circle from 'ol/geom/Circle';
 import PointerInteraction from 'ol/interaction/Pointer.js';
 import {defaults as defaultInteractions} from 'ol/interaction/defaults';
 import {Control, defaults as defaultControls} from 'ol/control.js';
+import DragAndDrop from 'ol/interaction/DragAndDrop.js';
+import {GPX, GeoJSON, IGC, KML, TopoJSON} from 'ol/format.js';
 
 import MSPChainerClass from './../js/msp/MSPchainer';
 import mspHelper from './../js/msp/MSPHelper';
@@ -1447,6 +1449,118 @@ function iconKey(filename) {
         }
     }
 
+    /////////////////////////////////////////////
+    //
+    // Layer Management Functions
+    //
+    /////////////////////////////////////////////
+
+    function updateLayerListUI() {
+        $('#layerListContainer').empty();
+        const customLayers = [];
+        map.getLayers().forEach(layer => {
+            if (layer.get('is_custom_overlay') === true) {
+                customLayers.push(layer);
+            }
+        });
+        if (customLayers.length === 0) {
+            $('#layerListContainer').html('<div style="color: #888; font-style: italic;">No layers loaded</div>');
+            return;
+        }
+        customLayers.forEach((layer, i) => {
+            const layerName = layer.get('name');
+            const isVisible = layer.getVisible();
+            const layerId = 'layer_' + layerName.replace(/[^a-zA-Z0-9]/g, '_' + i);
+            const layerHtml = `
+                <div class="layer-item" style="display: flex; align-items: center; justify-content: space-between; padding: 8px 5px; border-bottom: 1px solid #444;">
+                    <div style="flex: 1; display: flex; align-items: center; min-width: 0;">
+                        <input id="${layerId}" type="checkbox" class="togglemedium layer-toggle" data-layer-name="${layerName}" ${isVisible ? 'checked' : ''} style="flex-shrink: 0;">
+                        <label for="${layerId}" style="margin-left: 8px; cursor: pointer; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${layerName}</label>
+                    </div>
+                    <div class="btnTable btnTableIcon btnTable-danger" style="margin-left: 10px; flex-shrink: 0;">
+                        <a class="ic_removeAll layer-delete" data-layer-name="${layerName}" href="#" title="Delete layer"></a>
+                    </div>
+                </div>
+            `;
+            $('#layerListContainer').append(layerHtml);
+        });
+        GUI.switchery();
+        $('.layer-toggle').on('change', function() {
+            const layerName = $(this).attr('data-layer-name');
+            const isChecked = $(this).is(':checked');
+            map.getLayers().forEach(layer => {
+                if (layer.get('name') === layerName && layer.get('is_custom_overlay')) {
+                    layer.setVisible(isChecked);
+                }
+            });
+        });
+        $('.layer-delete').on('click', function(event) {
+            event.preventDefault();
+            const layerName = $(this).attr('data-layer-name');
+            if (dialog.confirm(i18n.getMessage('layerConfirmDelete'))) {
+                removeLayerFromDisk(layerName);
+            }
+        });
+    }
+
+    function saveLayerToDisk(layer) {
+        let customOverlayList = store.get('custom_overlay_list');
+        if (customOverlayList === undefined) {
+            customOverlayList = [];
+        }
+        const writer = new GeoJSON();
+        const geojsonStr = writer.writeFeatures(layer.getSource().getFeatures());
+        const layerName = layer.get('name');
+        customOverlayList = customOverlayList.filter(l => l.name !== layerName);
+        const savedLayer = {
+            name: layerName,
+            layer_data: geojsonStr,
+            visible: layer.getVisible()
+        };
+        customOverlayList.push(savedLayer);
+        store.set('custom_overlay_list', customOverlayList);
+        GUI.log(`Saved layer: ${layerName}`);
+    }
+
+    function removeLayerFromDisk(layerName) {
+        let customOverlayList = store.get('custom_overlay_list');
+        if (!customOverlayList) return;
+        customOverlayList = customOverlayList.filter(l => l.name !== layerName);
+        store.set('custom_overlay_list', customOverlayList);
+        const layersToRemove = [];
+        map.getLayers().forEach(layer => {
+            if (layer.get('name') === layerName && layer.get('is_custom_overlay')) {
+                layersToRemove.push(layer);
+            }
+        });
+        layersToRemove.forEach(layer => map.removeLayer(layer));
+        updateLayerListUI();
+        GUI.log(`Removed layer: ${layerName}`);
+    }
+
+    function addGeoLayerToMap(features, fileName, visible = true) {
+        const vectorSource = new VectorSource({
+            features: features
+        });
+        vectorSource.forEachFeature(function(feature) {
+            if (!feature.get('name')) {
+                feature.set('name', fileName);
+            }
+            feature.set('show_info_on_hover', true);
+        });
+        const vectorLayer = new VectorLayer({
+            source: vectorSource,
+            visible: visible
+        });
+        vectorLayer.set('name', fileName);
+        vectorLayer.set('is_custom_overlay', true);
+        vectorLayer.set('no_interaction', true);
+        map.addLayer(vectorLayer);
+        saveLayerToDisk(vectorLayer);
+        updateLayerListUI();
+        GUI.log(`Added layer: ${fileName}`);
+    }
+
     /////////////////////////////////////////////
     //
     // Manage Waypoint
@@ -2181,6 +2295,35 @@ function iconKey(filename) {
             }
         };
 
+        class PlannerLayerControl extends Control {
+
+            constructor(opt_options) {
+                var options = opt_options || {};
+                var button = document.createElement('button');
+
+                button.innerHTML = ' ';
+                button.style = `background: url("${icons['icon_geozone_white']}") no-repeat 1px -1px; background-color: rgba(0,60,136,.5);`;
+
+                var handleShowLayers = function () {
+                    $('#missionPlannerLayers').fadeIn(300);
+                    updateLayerListUI();
+                };
+
+                button.addEventListener('click', handleShowLayers, false);
+                button.addEventListener('touchstart', handleShowLayers, false);
+
+                var element = document.createElement('div');
+                element.className = 'mission-control-layers ol-unselectable ol-control';
+                element.appendChild(button);
+                element.title = 'Layer Management';
+
+                super({
+                    element: element,
+                    target: options.target
+                });
+            }
+        };
+
         /**
          * @param {ol.MapBrowserEvent} evt Map browser event.
          * @return {boolean} `true` to start the drag sequence.
@@ -2192,11 +2335,17 @@ function iconKey(filename) {
 
             var feature = map.forEachFeatureAtPixel(evt.pixel,
                 function (feature, layer) {
+                    if (layer && layer.get('no_interaction') === true) {
+                        return null;  // Ignore custom overlay layers
+                    }
                     return feature;
                 });
 
             tempMarker = map.forEachFeatureAtPixel(evt.pixel,
                 function (feature, layer) {
+                    if (layer && layer.get('no_interaction') === true) {
+                        return null;  // Ignore custom overlay layers
+                    }
                     return layer;
                 });
 
@@ -2409,6 +2558,7 @@ function iconKey(filename) {
                 new PlannerMultiMissionControl(),
                 new PlannerSafehomeControl(),
                 new PlannerElevationControl(),
+                new PlannerLayerControl(),
             ]
 
             if (isGeozoneEnabeld) {
@@ -2420,6 +2570,7 @@ function iconKey(filename) {
                 new PlannerSettingsControl(),
                 new PlannerMultiMissionControl(),
                 new PlannerElevationControl(),
+                new PlannerLayerControl(),
                 //new app.PlannerSafehomeControl() // TO COMMENT FOR RELEASE : DECOMMENT FOR DEBUG
             ]
         }
@@ -2467,6 +2618,96 @@ function iconKey(filename) {
             map.getView().setZoom(missionPlannerLastValues.zoom);
         }         
 
+        //////////////////////////////////////////////////////////////////////////
+        // Load previously saved GEO files from electron store
+        //////////////////////////////////////////////////////////////////////////
+        if (store.get('custom_overlay_list') === undefined) {
+            store.set('custom_overlay_list', []);
+        }
+
+        for (let savedLayer of store.get('custom_overlay_list')) {
+          const features = new GeoJSON().readFeatures(
+            savedLayer.layer_data,
+            {
+              dataProjection: 'EPSG:4326',
+              featureProjection: map.getView().getProjection()
+            }
+          );
+            
+            const vectorSource = new VectorSource({
+                features: features
+            });
+            
+            vectorSource.forEachFeature(function(feature) {
+                feature.set('show_info_on_hover', true);
+            });
+            
+            const vectorLayer = new VectorLayer({
+                source: vectorSource,
+                visible: savedLayer.visible !== false  // default to visible
+            });
+            
+            vectorLayer.set('name', savedLayer.name);
+            vectorLayer.set('is_custom_overlay', true);
+            vectorLayer.set('no_interaction', true);
+            
+            map.addLayer(vectorLayer);
+        }
+
+        //////////////////////////////////////////////////////////////////////////
+        // Add drag-and-drop support for GEO files
+        //////////////////////////////////////////////////////////////////////////
+        const dragAndDropInteraction = new DragAndDrop({
+            formatConstructors: [
+                GPX,
+                GeoJSON,
+                IGC,
+                KML,
+                TopoJSON,
+            ],
+        });
+
+        dragAndDropInteraction.on('addfeatures', function(event) {
+            const fileName = event.file.name;
+            GUI.log(`Drag-and-dropped file: ${fileName}`);
+            addGeoLayerToMap(event.features, fileName);
+        });
+
+        map.addInteraction(dragAndDropInteraction);
+
+        //////////////////////////////////////////////////////////////////////////
+        // Feature hover info display
+        //////////////////////////////////////////////////////////////////////////
+        const displayFeatureInfo = function(pixel) {
+            const features = [];
+            const geoInfoEl = document.getElementById('geo_info');
+            map.forEachFeatureAtPixel(pixel, function(feature) {
+                if (feature.get('show_info_on_hover') === true) {
+                    features.push(feature);
+                }
+            });
+            
+            if (features.length > 0) {
+                const info = [];
+                for (let i = 0; i < features.length; i++) {
+                    const name = features[i].get('name') || 'Unknown';
+                    info.push(name);
+                }
+                geoInfoEl.innerHTML = info.join(', ');
+                geoInfoEl.style.opacity = '1';
+            } else {
+                geoInfoEl.style.opacity = '0';
+            }
+        };
+
+        map.on('pointermove', function(evt) {
+            if (evt.dragging) {
+                return;
+            }
+            const pixel = map.getEventPixel(evt.originalEvent);
+            displayFeatureInfo(pixel);
+        });
+
         //////////////////////////////////////////////////////////////////////////
         // Map on-click behavior definition
         //////////////////////////////////////////////////////////////////////////
@@ -3764,6 +4005,92 @@ function iconKey(filename) {
             sendWaypointsToFC(true);
         });
 
+        /////////////////////////////////////////////
+        // Callback for Layer management buttons
+        /////////////////////////////////////////////
+        $('#loadGeoFileButton').on('click', function() {
+            var options = {
+                filters: [
+                    { name: 'GEO Files', extensions: ['kml', 'geojson', 'json', 'gpx', 'igc', 'topojson'] },
+                    { name: 'All Files', extensions: ['*'] }
+                ]
+            };
+            
+            dialog.showOpenDialog(options).then(result => {
+                if (result.canceled) {
+                    console.log('No file selected');
+                    return;
+                }
+                
+                if (result.filePaths.length == 1) {
+                    const filePath = result.filePaths[0];
+                    const fileName = filePath.split('/').pop().split('\\').pop();
+                    
+                    // Read file content using Electron API
+                    window.electronAPI.readFile(filePath).then(response => {
+                        if (response.error) {
+                            GUI.log(`Error reading file: ${response.error}`);
+                            dialog.alert(i18n.getMessage('layerLoadError'));
+                            return;
+                        }
+                        
+                        try {
+                            // Detect format and parse
+                            let format;
+                            const ext = fileName.split('.').pop().toLowerCase();
+                            
+                            switch(ext) {
+                                case 'kml':
+                                    format = new KML();
+                                    break;
+                                case 'json':
+                                case 'geojson':
+                                    format = new GeoJSON();
+                                    break;
+                                case 'gpx':
+                                    format = new GPX();
+                                    break;
+                                case 'igc':
+                                    format = new IGC();
+                                    break;
+                                case 'topojson':
+                                    format = new TopoJSON();
+                                    break;
+                                default:
+                                    throw new Error('Unsupported file format');
+                            }
+                            
+                            const features = format.readFeatures(response.data, {
+                                dataProjection: 'EPSG:4326',
+                                featureProjection: 'EPSG:3857'
+                            });
+                            
+                            if (features.length === 0) {
+                                throw new Error('No features found in file');
+                            }
+                            
+                            addGeoLayerToMap(features, fileName);
+                            GUI.log(`Loaded ${features.length} features from ${fileName}`);
+                            
+                        } catch (error) {
+                            GUI.log(`Error parsing file: ${error.message}`);
+                            dialog.alert(i18n.getMessage('layerParseError'));
+                        }
+                    }).catch(error => {
+                        GUI.log(`Error reading file: ${error.message || error}`);
+                        dialog.alert(i18n.getMessage('layerLoadError'));
+                    });
+                }
+            }).catch(error => {
+                GUI.log(`Error opening file dialog: ${error.message || error}`);
+                dialog.alert(i18n.getMessage('layerLoadError'));
+            });
+        });
+
+        $('#cancelLayers').on('click', function() {
+            $('#missionPlannerLayers').fadeOut(300);
+        });
+
         /////////////////////////////////////////////
         // Callback for settings
         /////////////////////////////////////////////