Add Layers control as tab to sidebar

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

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

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',

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