Make it easier to specify the layer for which you want to modify the …

…transparency.
lizardtechblog · Dec 18, 2013 · 4d77005 · tormi · Dec 30, 2013 · 4d77005
1 parent 3c87453
commit 4d77005
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/LeafletOpacityDemo.html b/LeafletOpacityDemo.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-    <title>Leaflet.OpacityControls Demo/title>
+    <title>Leaflet.OpacityControls Demo</title>
 
     <link rel="stylesheet" href="lib/leaflet/leaflet.css" />
 	<!--[if lte IE 8]><link rel="stylesheet" href="libs/leaflet.ie.css" /><![endif]-->
@@ -57,7 +57,7 @@
             zoomControl: true
         });
 
-        historic_seattle.setOpacity(0.5);
+
 
     //Create the opacity controls
         var higherOpacity = new L.Control.higherOpacity();
@@ -66,7 +66,13 @@
         map.addControl(lowerOpacity);
         var opacitySlider = new L.Control.opacitySlider();
         map.addControl(opacitySlider);
-
+
+    //Specify the layer for which you want to modify the opacity. Note that the setOpacityLayer() method applies to all the controls.
+    //You only need to call it once. 
+        opacitySlider.setOpacityLayer(historic_seattle);
+
+    //Set initial opacity to 0.5 (Optional)
+        historic_seattle.setOpacity(0.5);
 	</script>
 </body>
 </html>
diff --git a/README.md b/README.md
@@ -30,3 +30,12 @@ Then to initialize the controls, add the following lines to the BODY of your HTM
     var opacitySlider = new L.Control.opacitySlider();
     map.addControl(opacitySlider);
 
+To specify the layer for which you want to modify the opacity, use the ````setOpacityLayer()```` method. For example, to set a layer called ````historic_seattle```` as the opacity layer, add the following line to the BODY of your HTML document:
+
+    higherOpacity.setOpacityLayer(historic_seattle);
+
+You only need to call the setOpacityLayer() method for one control. The method sets the opacity layer for the other controls automatically. This makes it possible for you to use controls individually. For example, if you only want to create the opacity slider control, you can add the following lines to the BODY of your HTML document:
+
+    var opacitySlider = new L.Control.opacitySlider();
+    map.addControl(opacitySlider);
+    opacitySlider.setOpacityLayer(historic_seattle);
diff --git a/lib/opacity/Control.Opacity.js b/lib/opacity/Control.Opacity.js
@@ -6,14 +6,18 @@
         https://github.com/lizardtechblog/Leaflet.OpacityControls
 */
 
+//Declare global variables
+var opacity_layer;
 
 //Create a control to increase the opacity value. This makes the image more opaque.
 L.Control.higherOpacity = L.Control.extend({
     options: {
         position: 'topright'
     },
-
-    onAdd: function (map) {
+    setOpacityLayer: function (layer) {
+            opacity_layer = layer;
+    },
+    onAdd: function () {
 
         var higher_opacity_div = L.DomUtil.create('div', 'higher_opacity_control');
 
@@ -30,7 +34,9 @@ L.Control.lowerOpacity = L.Control.extend({
     options: {
         position: 'topright'
     },
-
+    setOpacityLayer: function (layer) {
+            opacity_layer = layer;
+    },
     onAdd: function (map) {
 
         var lower_opacity_div = L.DomUtil.create('div', 'lower_opacity_control');
@@ -48,7 +54,9 @@ L.Control.opacitySlider = L.Control.extend({
     options: {
         position: 'topright'
     },
-
+    setOpacityLayer: function (layer) {
+            opacity_layer = layer;
+    },
     onAdd: function (map) {
 
         var opacity_slider_div = L.DomUtil.create('div', 'opacity_slider_control');
@@ -71,7 +79,7 @@ L.Control.opacitySlider = L.Control.extend({
               slide: function ( event, ui ) {
 
                 var slider_value = ui.value / 100;
-                historic_seattle.setOpacity(slider_value);
+                opacity_layer.setOpacity(slider_value);
 
               }
             });
@@ -85,12 +93,12 @@ L.Control.opacitySlider = L.Control.extend({
 
 
 function onClickHigherOpacity() {
-    var opacity_value = historic_seattle.options.opacity;
+    var opacity_value = opacity_layer.options.opacity;
 
     if (opacity_value > 1) {
         return;
     } else {
-        historic_seattle.setOpacity(opacity_value + 0.2);
+        opacity_layer.setOpacity(opacity_value + 0.2);
         //When you double-click on the control, do not zoom.
         map.doubleClickZoom.disable();
         map.once('click', function (e) { 
@@ -101,12 +109,12 @@ function onClickHigherOpacity() {
 }
 
 function onClickLowerOpacity() {
-    var opacity_value = historic_seattle.options.opacity;
+    var opacity_value = opacity_layer.options.opacity;
 
     if (opacity_value < 0) {
         return;
     } else {
-        historic_seattle.setOpacity(opacity_value - 0.2);
+        opacity_layer.setOpacity(opacity_value - 0.2);
         //When you double-click on the control, do not zoom.
         map.doubleClickZoom.disable();
         map.once('click', function (e) {