title: L.control.layers and Leaflet.OpacityControls
body: <p>I have a Leaflet map with a selection of overlay layers and a base layer setup using <a href="http://leafletjs.com/reference-1.0.3.html#control-layers" rel="nofollow noreferrer">L.control.layers</a>. I want to have a opacity slider, <a href="https://github.com/lizardtechblog/Leaflet.OpacityControls" rel="nofollow noreferrer">Leaflet.OpacityControls</a>, that works on the selected layer with the base layer below.</p>
  
  <p>Looking into <code>L.control.layers</code>:</p>
  
  <pre><code>for (var i = inputs.length - 1; i &gt;= 0; i--) {
      input = inputs[i];
      layer = this._getLayer(input.layerId).layer;
      hasLayer = this._map.hasLayer(layer);
  </code></pre>
  
  <p>and <code>layer</code> is </p>
  
  <pre><code>layer = NewClass {_url: "http://crores.s3.amazonaws.com/tiles/bkm/{z}/{x}/{y}.png", options: Object, _events: Object, _initHooksCalled: true, _leaflet_id: 98}
  </code></pre>
  
  <p>or later in <code>util.js</code></p>
  
  <pre><code>stamp: function (obj) {
      /*eslint-disable */
      obj._leaflet_id = obj._leaflet_id || ++L.Util.lastId;
      return obj._leaflet_id;
  </code></pre>
  
  <p>and <code>obj</code> is</p>
  
  <pre><code>obj = NewClass {_url: "http://crores.s3.amazonaws.com/tiles/baistDetail/{z}/{x}/{y}.png", options: Object, _events: Object, _initHooksCalled: true, _leaflet_id: 100}
  </code></pre>
  
  <p>except I'm not sure if this is part of displaying the control panel or is the current active overlay layer. In any case these variables aren't available once the page finishes loading. They probably are, but they key to my question may be how to access them.</p>
  
  <p>The example for opacity slider is hard coded for the overlay layer.</p>
  
  <pre><code>map.addControl(opacitySlider);
  opacitySlider.setOpacityLayer(overlay);
  overlay.setOpacity(0.5);
  </code></pre>
  
  <p>where <code>overlay</code> is a Leaflet layer. How do I set <code>overlay</code> to the selected overlay map? L.control.layers knows, but how do I pass that to the opacitySlider.</p>
  
  <p>I can't believe that this isn't a common need, but haven't found anything.</p>
  
  <p>The relevant part of Leaflet.OpacityControls:</p>
  
  <pre><code>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');
  
          $(opacity_slider_div).slider({
            orientation: "vertical",
            range: "min",
            min: 0,
            max: 100,
            value: 60,
            step: 10,
            start: function ( event, ui) {
              //When moving the slider, disable panning.
              map.dragging.disable();
              map.once('mousedown', function (e) { 
                map.dragging.enable();
              });
            },
            slide: function ( event, ui ) {
              var slider_value = ui.value / 100;
              opacity_layer.setOpacity(slider_value);
            }
          });        
          return opacity_slider_div;
      }
  });
  </code></pre>
  
  <p>My site without the opacity slider implemented: <a href="https://stark-cove-20051.herokuapp.com/streets/156" rel="nofollow noreferrer">https://stark-cove-20051.herokuapp.com/streets/156</a>. Very much beta.</p>