From 23e7eb073e6bdd0dd05c46a66b06485faedb70f0 Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Mon, 12 Feb 2018 18:45:33 +0100
Subject: [PATCH] Add Layers control as tab to sidebar

---
 css/style.css           |  7 +++++++
 index.html              |  7 +++++++
 js/Map.js               |  2 +-
 js/control/LayersTab.js | 12 ++++++++++++
 4 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 js/control/LayersTab.js

diff --git a/css/style.css b/css/style.css
index 2f26fd5..4ef7553 100644
--- a/css/style.css
+++ b/css/style.css
@@ -294,3 +294,10 @@ table.dataTable.display tbody tr.even:hover {
 .sidebar-pane {
     height: 100%;
 }
+
+/* layers control as sidebar tab */
+#layers-control-wrapper label {
+    display: block;
+    font-size: 0.9rem;
+    line-height: normal;
+}
diff --git a/index.html b/index.html
index 7b94575..6a8262c 100644
--- a/index.html
+++ b/index.html
@@ -168,6 +168,7 @@
         <div id="sidebar" class="sidebar collapsed">
             <div class="sidebar-tabs">
                 <ul role="tablist">
+                    <li><a href="#tab_layers_control" role="tab"><img src="dist/images/layers.png"></a></li>
                     <li hidden><a href="#tab_itinerary" role="tab"><i class="fa fa-map-signs"></i></a></li>
                     <li><a href="#tab_profile" role="tab"><i class="fa fa-wrench"></i></a></li>
                     <li><a href="#tab_data" role="tab"><i class="fa fa-table"></i></a></li> 
@@ -175,6 +176,12 @@
             </div>
             <div class="sidebar-content">
 
+                <div class="sidebar-pane" id="tab_layers_control">
+                    <h1 class="sidebar-header">Layers<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
+                    <div id="layers-control-wrapper">
+                    </div>
+                </div>
+                
                 <div class="sidebar-pane" id="tab_profile">
                     <h1 class="sidebar-header">Custom routing profile<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
                     <form class="flexcolumn flexgrow">
diff --git a/js/Map.js b/js/Map.js
index e20ce9f..bf1d1f7 100644
--- a/js/Map.js
+++ b/js/Map.js
@@ -111,7 +111,7 @@ BR.Map = {
             map.addLayer(firstLayer);
         }
 
-        layersControl = L.control.layers(baseLayers, overlays).addTo(map);
+        layersControl = BR.layersTab(baseLayers, overlays).addTo(map);
 
         L.control.locate({
             icon: 'fa fa-location-arrow',
diff --git a/js/control/LayersTab.js b/js/control/LayersTab.js
new file mode 100644
index 0000000..7eb13f3
--- /dev/null
+++ b/js/control/LayersTab.js
@@ -0,0 +1,12 @@
+BR.LayersTab = L.Control.Layers.extend({
+    addTo: function (map) {
+        this._map = map;
+        this.onAdd(map);
+        L.DomUtil.get('layers-control-wrapper').appendChild(this._form);
+        return this;
+    }
+});
+
+BR.layersTab = function (baseLayers, overlays, options) {
+	return new BR.LayersTab(baseLayers, overlays, options);
+};