From the Leaflet.OpacityControls plugin, you can add an opacity slider to a tiled layer by:

var opacitySlider = new L.Control.opacitySlider();



I want the opacity slide-bar to link to not just one layer, but the tiled raster layer with the largest z-index (i.e. upper most layer) at any given time. How should I replace the interactive_layer var to do so?

Working with very limited JavaScript experience.


Here a suggested solution, may be not the best but it serves the purpose:

HTML: HTML slider control

<input id="slide" type="range" min="0" max="1" step="0.1" value="1" onchange="updateOpacity(this.value)">

Script: Update Opacity of top layer

function updateOpacity(value) {
    var interactive_layer = L.LayerGroup().getLayers()[0]; //In case you are using layer group. Also if you define the Layer group as Global variable, then you can call getLayers() directly.
  • How would you write the //Get top layer... portion? That's the part I am missing. LayerGroup() is fine or any other function that achieves the same result. – jbukoski Dec 1 '16 at 4:29
  • What you are using in your code ? – Shiko Dec 1 '16 at 4:34
  • I have updated my answer. You can use LayerGroup().getLayers()[0] – Shiko Dec 1 '16 at 4:40
  • Nothing in particular, currently. I updated given your L.LayerGroup().getLayers()[0]; and it works... but I want the [0] index to point to the layer in the LayerGroup with the largest z-index... in essence the top layer. Does that make sense? – jbukoski Dec 1 '16 at 4:47
  • 1
    Well, when you are adding checkboxes for each layer, get layer ID and set to checkbox like <input type=checkbox data-layerid='[layerid]' class=overlayLayers /> but don't do that to base layer. Then on 'change' event of slider get the checked checboxes and pick the top one then get the layer ID value and use it to fetch layer from LayerGroup() function. – Shiko Dec 1 '16 at 5:12

There is a plugin called Leaflet.Control.Opacity.


  • Could you try expand on this answer? Just in case in future the link you have suggested is no longer in use. – Keagan Allan Jul 15 '18 at 23:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.