From 124dcc3fbef518a87801135370cefecb5d1bc0c7 Mon Sep 17 00:00:00 2001
From: "Stanislav Lechev [0xAF]" <af@0xAF.org>
Date: Thu, 31 Aug 2023 23:07:51 +0300
Subject: [PATCH] Add Extra Map Layers to Leaflet

---
 htdocs/map-leaflet.html |  1 +
 htdocs/map-leaflet.js   | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/htdocs/map-leaflet.html b/htdocs/map-leaflet.html
index 833e370e..1e24bfff 100644
--- a/htdocs/map-leaflet.html
+++ b/htdocs/map-leaflet.html
@@ -18,6 +18,7 @@
         <div id="openwebrx-map-selectors">
             <h3>Map</h3>
             <select style="width:100%;" id="openwebrx-map-source"></select>
+            <div id="openwebrx-map-extralayers"></div>
             <h3>Colors</h3>
             <select style="width:100%;" id="openwebrx-map-colormode">
                 <option value="byband" selected="selected">By Band</option>
diff --git a/htdocs/map-leaflet.js b/htdocs/map-leaflet.js
index f65ecb5e..6b8cd70f 100644
--- a/htdocs/map-leaflet.js
+++ b/htdocs/map-leaflet.js
@@ -110,6 +110,16 @@ var mapSources = [
     },
 ];
 
+var mapExtraLayers = [
+    {
+        name: 'OpenSeaMap',
+        url: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
+        options: {
+            attribution: 'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors'
+        },
+    },
+];
+
 // reasonable default; will be overriden by server
 var retention_time = 2 * 60 * 60 * 1000;
 
@@ -275,6 +285,19 @@ MapManager.prototype.initializeMap = function(receiver_gps, api_key) {
                     });
                     map.addLayer(m.layer)
                 });
+                $.each(mapExtraLayers, function (idx, mel) {
+                    mel.layer = L.tileLayer(mel.url, mel.options);
+                    $('#openwebrx-map-extralayers').append(
+                        $('<label><input type="checkbox" id="openwebrx-map-layer-' + mel.name + '">' + mel.name + '</label>').on('change', function (e) {
+                            if (e.target.checked) {
+                                map.addLayer(mel.layer);
+                            } else {
+                                if (map.hasLayer(mel.layer))
+                                    map.removeLayer(mel.layer);
+                            }
+                        })
+                    );
+               });
 
                 // Create map legend selectors
                 self.setupLegendFilters(layerControl.legend);