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.

Author: erikbohnsack

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"
     },

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;
 }

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">