ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add Layers control as tab to sidebar

Browse source
This commit is contained in:
Norbert Renner 2018-02-12 18:45:33 +01:00
parent 443ca9c03e
commit 23e7eb073e
4 changed files with 27 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

7
css/style.css
View file

@ -294,3 +294,10 @@ table.dataTable.display tbody tr.even:hover {
.sidebar-pane { .sidebar-pane {
height: 100%; height: 100%;
} }
/* layers control as sidebar tab */
#layers-control-wrapper label {
display: block;
font-size: 0.9rem;
line-height: normal;
}

7
index.html
View file

@ -168,6 +168,7 @@
<div id="sidebar" class="sidebar collapsed"> <div id="sidebar" class="sidebar collapsed">
<div class="sidebar-tabs"> <div class="sidebar-tabs">
<ul role="tablist"> <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 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_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> <li><a href="#tab_data" role="tab"><i class="fa fa-table"></i></a></li>
@ -175,6 +176,12 @@
</div> </div>
<div class="sidebar-content"> <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"> <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> <h1 class="sidebar-header">Custom routing profile<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
<form class="flexcolumn flexgrow"> <form class="flexcolumn flexgrow">

2
js/Map.js
View file

@ -111,7 +111,7 @@ BR.Map = {
map.addLayer(firstLayer); map.addLayer(firstLayer);
} }
layersControl = L.control.layers(baseLayers, overlays).addTo(map); layersControl = BR.layersTab(baseLayers, overlays).addTo(map);
L.control.locate({ L.control.locate({
icon: 'fa fa-location-arrow', icon: 'fa fa-location-arrow',

12
js/control/LayersTab.js Normal file
View file

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