custom kml layer function

html/layers.js

@@ -21,10 +21,10 @@ function createBaseLayers() {
     let world = new ol.Collection();
     let us = new ol.Collection();
     let europe = new ol.Collection();
-    let custom = new ol.Collection();
+    custom_layers = new ol.Collection();
 
     if (loStore['customTiles'] != undefined) {
-        custom.push(new ol.layer.Tile({
+        custom_layers.push(new ol.layer.Tile({
             source: new ol.source.OSM({
                 "url" : loStore['customTiles'],
                 maxZoom: 15,
@@ -516,13 +516,11 @@ function createBaseLayers() {
         }
     }
 
-    if (custom.getLength() > 0) {
-        layers.push(new ol.layer.Group({
-            name: 'custom',
-            title: 'Custom',
-            layers: new ol.Collection(custom.getArray().reverse()),
-        }));
-    }
+    layers.push(new ol.layer.Group({
+        name: 'custom',
+        title: 'Custom',
+        layers: custom_layers,
+    }));
 
     if (europe.getLength() > 0) {
         layers.push(new ol.layer.Group({

html/script.js

@@ -156,6 +156,7 @@ let MessageRate = 0;
 
 let layers;
 let layers_group;
+let custom_layers;
 
 const nullStyle = new ol.style.Style({});
 
@@ -7720,5 +7721,20 @@ if (adsbexchange && window.location.hostname.startsWith('inaccurate')) {
     jQuery('#inaccurate_warning').removeClass('hidden');
 }
 
+function add_kml_overlay(url, name, opacity) {
+    custom_layers.push(new ol.layer.Vector({
+        source: new ol.source.Vector({
+            url: url,
+            format: new ol.format.KML(),
+        }),
+        name: name,
+        title: 'custom_' + name,
+        type: 'overlay',
+        opacity: opacity,
+        visible: true,
+        zIndex: 99,
+    }));
+}
+
 parseURLIcaos();
 initialize();