2

I am attempting to use the Slider For Bootstrap to update the opacity of a layer within Leaflet.

The slider also needs to be in a Bootstrap Popup but this part is working.

As per this JSFiddle you can see I have the slider working but I cannot get it to update/ set the opacity of the background layer, how can this be achieved?

Improve this question

1 Answer 1

Reset to default
6

There is a setOpacity method for TileLayer. This should do what you want:

$('#rangeSlider').slider().on('slide', function (ev) {
    sliderVal = ev.value;
    background.setOpacity(sliderVal/100);
});

EDIT: Here is an example fiddle with sliders for controlling opacity of both the background (with .setOpacity) and a vector layer (with .setStyle):

http://jsfiddle.net/nathansnider/zkcs36p6/

Improve this answer
4
  • Would this also work for layers that aren't tiled, for example a leaflet JSON layer?
    – Joshua Dickerson
    Oct 20, 2015 at 20:31
  • There is a setStyle method for Path elements, which is inherited by all vector layers. That should work for everything except regular Markers. It would go something like myLayer.setStyle({fillOpacity : sliderVal/100}); (or {opacity : sliderVal/100}, for lines or outlines).
    – nathansnider
    Oct 20, 2015 at 21:06
  • Is it possible to combine both fillOpacity and opacity into one so that the overall transparency of a polygon that has a line boundary would change at once?
    – Joshua Dickerson
    Oct 30, 2015 at 17:48
  • 1
    Of course! Just set both options within the same .on('slide', ...) event handler, like myLayer.setStyle({fillOpacity : sliderVal/100, opacity : sliderVal/100});
    – nathansnider
    Oct 30, 2015 at 18:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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