elesdoar · ReadWriteGeo · Apr 14, 2015 · Apr 14, 2015 · Apr 14, 2015 · Apr 14, 2015
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 Leaflet Control Orderlayers
 ===========================
 
-This plugin for leaflet provide support for order overlay layers in leaflet maps, for clone this code:
+This plugin for leaflet provide support for order overlay layers and for change layers opacity in leaflet maps, for clone this code:
 
 ```
 $ git clone https://github.com/elesdoar/leaflet-control-orderlayers.git
@@ -17,64 +17,106 @@ $ git clone https://github.com/elesdoar/leaflet-control-orderlayers.git
   <script src="[path to js]/leaflet.control.orderlayers.min.js"></script>
 ```
 
-#### Add css files:
+#### Add css files and map style:
 
 ```html
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="[path to css]/leaflet.control.orderlayers.css" />
+
+  <style>
+    html {
+      height: 100%;
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      vertical-align: baseline;
+    }
+    body, #container {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+    .map {
+      height: 100%;
+    }
+  </style>
 ```
 
 #### Add control:
 
 ```js
-jQuery(function() {
-  var map = L.map('map').setView([4.598056, -74.075833], 13);
+  <div id="map" class="map"></div>
 
-  var b1 = L.tileLayer('http://a.tiles.mapbox.com/v3/[map-key]/{z}/{x}/{y}.png', {
-      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
-      maxZoom: 20
-  }).addTo(map);
+  <script>
+    var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      opacity: 0.50,
+      maxZoom: 19,
+      detectRetina: true
+    });
 
-  var b2 = L.tileLayer('http://a.tiles.mapbox.com/v3/[map-key]/{z}/{x}/{y}.png', {
-      attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
-      maxZoom: 20
-  });
+    var baseLayers = {
+      '<i class="fa fa-globe"></i>OpenStreetMap_Mapnik': OpenStreetMap_Mapnik
+    };
 
-  var baseLayers = {
-    'Streets': b1,
-    'Night': b2,
-  };
-
-  var bogota =  L.tileLayer.wms("http://mapas.catastrobogota.gov.co/arcgiswsh/Mapa_Referencia/Mapa_referencia/MapServer/WMSServer", {
+    var bogota =  L.tileLayer.wms("http://mapas.catastrobogota.gov.co/arcgiswsh/Mapa_Referencia/Mapa_referencia/MapServer/WMSServer", {
       layers: '8,7,6,5,4,2',
       format: 'image/png',
       opacity: 0.45,
       transparent: true,
-      attribution: 'Catastro Bogotá http://catastrobogota.gov.co',
+      attribution: 'Catastro',
       crs: L.CRS.EPSG4326,
       version: '1.3.0'
-  }).addTo(map);
+    });
+
+    var fire = L.tileLayer('http://openfiremap.org/hytiles/{z}/{x}/{y}.png', {
+      attribution: 'OpenFireMap',
+      continuousWorld: true
+    });
+
+    var Bogotacity = L.marker([4.598056, -74.075833]).bindPopup('Bogota'),
+      Cota       = L.marker([4.809568, -74.098129]).bindPopup('Cota'),
+      El_Dorado  = L.marker([4.702102, -74.147931]).bindPopup('El Dorado'),
+      La_Calera  = L.marker([4.720689, -73.974716]).bindPopup('La Calera'),
+      Soacha     = L.marker([4.583333, -74.216667]).bindPopup('Soacha');
+
+    var cities = L.layerGroup([Bogotacity, Cota, El_Dorado, La_Calera, Soacha]);
+
+    var overlayLayers = {
+      '<i class="fa fa-fire"></i>OpenFireMap': fire,
+      '<i class="fa fa-database"></i>Bogota': bogota,
+      '<i class="fa fa-map-marker"></i>Cities': cities
+    };
+
+    var map = L.map('map', {
+      center: [4.649, -74.086],
+      zoom: 15,
+      //default base layer
+      layers: [OpenStreetMap_Mapnik],
+      zoomControl: false
+    });
+
+    var controls = L.control.orderlayers(baseLayers, overlayLayers, {collapsed: false, title: '', opacity: true, increment: 0.1});
+    controls.addTo(map);
 
-  var fire = L.tileLayer('http://openfiremap.org/hytiles/{z}/{x}/{y}.png', {
-      attribution: '© OpenFireMap contributors - © OpenStreetMap contributors',
-    continuousWorld: true
-  }).addTo(map);
+    map.setView([4.649, -74.086], 11);
 
-  var overlayLayers = {
-    'Bogotá': bogota,
-    'OpenFireMap': fire
-  };
+    bogota.addTo(map);
+    cities.addTo(map);
+    fire.addTo(map);
 
-  var controls = L.control.orderlayers(baseLayers, overlayLayers, {collapsed: false});
-      controls.addTo(map);
+    var Foo        = L.marker([4.8, -74]).bindPopup('foo');
+    Foo.addTo(map);
 
-  map.setView([4.649, -74.086], 11);
-});
+  </script>
 ```
 
 ### Options
 
 + **title:** Control title
 + **order:** Order for layers, 'normal': ascending z-index order, 'qgis': descending z-index order, it's like Qgis or ArcMap.
++ **opacity:** Allow opacity control (default: false)
++ **increment:** Opacity increment.
 
 ### Licence
 

diff --git a/examples/simple-example-2.html b/examples/simple-example-2.html
@@ -0,0 +1,97 @@
+<html>
+<head>
+	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+	<script src="../src/leaflet.control.orderlayers.js"></script>
+
+	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+	<link rel="stylesheet" href="../src/css/leaflet.control.orderlayers.css" />
+
+	<style>
+		html {
+			height: 100%;
+			-moz-box-sizing: border-box;
+			-webkit-box-sizing: border-box;
+			box-sizing: border-box;
+			vertical-align: baseline;
+		}
+		body, #container {
+			height: 100%;
+			margin: 0;
+			padding: 0;
+		}
+		.map {
+			height: 100%;
+		}
+	</style>
+</head>
+
+<body>
+
+	<div id="map" class="map"></div>
+
+	<script>
+		var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+			opacity: 0.50,
+			maxZoom: 19,
+			detectRetina: true
+		});
+
+		var baseLayers = {
+			'<i class="fa fa-globe"></i>OpenStreetMap_Mapnik': OpenStreetMap_Mapnik
+		};
+
+		var bogota =  L.tileLayer.wms("http://mapas.catastrobogota.gov.co/arcgiswsh/Mapa_Referencia/Mapa_referencia/MapServer/WMSServer", {
+			layers: '8,7,6,5,4,2',
+			format: 'image/png',
+			opacity: 0.45,
+			transparent: true,
+			attribution: 'Catastro',
+			crs: L.CRS.EPSG4326,
+			version: '1.3.0'
+		});
+
+		var fire = L.tileLayer('http://openfiremap.org/hytiles/{z}/{x}/{y}.png', {
+			attribution: 'OpenFireMap',
+			continuousWorld: true
+		});
+
+		var Bogotacity = L.marker([4.598056, -74.075833]).bindPopup('Bogota'),
+			Cota       = L.marker([4.809568, -74.098129]).bindPopup('Cota'),
+			El_Dorado  = L.marker([4.702102, -74.147931]).bindPopup('El Dorado'),
+			La_Calera  = L.marker([4.720689, -73.974716]).bindPopup('La Calera'),
+			Soacha     = L.marker([4.583333, -74.216667]).bindPopup('Soacha');
+
+		var cities = L.layerGroup([Bogotacity, Cota, El_Dorado, La_Calera, Soacha]);
+
+		var overlayLayers = {
+			'<i class="fa fa-fire"></i>OpenFireMap': fire,
+			'<i class="fa fa-database"></i>Bogota': bogota,
+			'<i class="fa fa-map-marker"></i>Cities': cities
+		};
+
+		var map = L.map('map', {
+			center: [4.649, -74.086],
+			zoom: 15,
+			//default base layer
+			layers: [OpenStreetMap_Mapnik],
+			zoomControl: false
+		});
+
+		var controls = L.control.orderlayers(baseLayers, overlayLayers, {collapsed: false, title: '', opacity: true, increment: 0.1});
+		controls.addTo(map);
+
+		map.setView([4.649, -74.086], 11);
+
+		bogota.addTo(map);
+		cities.addTo(map);
+		fire.addTo(map);
+
+		var Foo        = L.marker([4.8, -74]).bindPopup('foo');
+		Foo.addTo(map);
+
+	</script>
+
+</body>
+</html>
diff --git a/src/css/leaflet.control.orderlayers.css b/src/css/leaflet.control.orderlayers.css
@@ -1,51 +1,36 @@
 .leaflet-control-layers {
-	width: 150px;
-	padding: 10px !important;
+	font-size: 1.2em;
 }
 
-.leaflet-control-layers-separator {
-	float: left;
-    width: 100%;
+.leaflet-control-layers .leaflet-row {
 }
 
 .leaflet-control-layers .leaflet-control-layers-title {
 	font-size: 1.2em;
 	margin: 0;
 }
 
-.leaflet-control-layers .leaflet-row {
-	float: left;
-    width: 100%;
+.leaflet-control-layers .leaflet-name {
+	margin: 0 0 0 5px;
 }
 
-.leaflet-control-layers .leaflet-row .leaflet-input {
-	float: left;
-	width: 15%;
+.leaflet-control-layers .leaflet-icon{
+	margin: 0 0 0 5px;
 }
 
-.leaflet-control-layers .leaflet-row .leaflet-name {
-	float: left;
-	width: 60%;
+.leaflet-control-layers .leaflet-opacity-value {
 }
 
-.leaflet-control-layers .leaflet-row .leaflet-up {
+.leaflet-control-layers-separator {
 	float: left;
-	background-image: url(../images/arrow-up.png);
-	background-repeat: no-repeat;
-	background-position: center;
-    height: 20px;
-    width: 16px;
-    opacity: 0.75;
-    cursor: pointer;
+	width: 100%;
+	margin: 0px;
 }
 
-.leaflet-control-layers .leaflet-row .leaflet-down {
-	float: left;
-	background-image: url(../images/arrow-down.png);
-	background-repeat: no-repeat;
-	background-position: center;
-    height: 20px;
-    width: 16px;
-    opacity: 0.75;
-    cursor: pointer;
-}
+.fa-padding {
+	padding: 0 10px;
+}
+
+.fa-inverse {
+	color: #D0D0D0;
+}