lizardtechblog / Leaflet.OpacityControls

Simple Leaflet controls to adjust the opacity of a map.
BSD 3-Clause "New" or "Revised" License
30 stars 18 forks source link

slider control for multiple layers? #6

Open marracci opened 8 years ago

marracci commented 8 years ago

Can you recommend how to leverage the slider control for changing to opacity for all 'active' overlays?

falqn commented 8 years ago

I'm trying to change the opacity of layerGroup, but it's not working. Is it difficult to add such option?

mgurjanov commented 6 years ago

This works for me when passing layerGroup:

//Declare global variables
var opacity_layer;
var opacity_layer_group; //ADD THIS global variable

//THEN ADD THIS control extension:

L.Control.opacitySliderGroup = L.Control.extend({
    options: {
        position: 'topright'
    },
    setOpacityLayerGroup: function (layerGroup) {
            opacity_layer_group = layerGroup;
    },
    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;
            _setOpacityToLayerGroup(opacity_layer_group, slider_value);
          }
        });

        return opacity_slider_div;
    }
});

//ADD LOCAL FUNCTION:

function _setOpacityToLayerGroup(layerGroup, sliderValue) {
     var index = 0;
     var layersInGroup = layerGroup.getLayers();
        for (index = 0; index < layersInGroup.length; ++index) {
            layersInGroup[index].setOpacity(sliderValue);
        }        
}

//FINALLY INIT & CALL from outside as:

var multiLayers = [layer1, layer2, layer3];
var layerGroup = L.layerGroup(multiLayers);
var opacitySliderGroup = new L.Control.opacitySliderGroup();
map.addControl(opacitySliderGroup);
opacitySliderGroup.setOpacityLayerGroup(layerGroup);

It then changes opacity for every layer in a group.