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

Doesn't work with geojson? #3

Open nadnerb33 opened 9 years ago

nadnerb33 commented 9 years ago

I noticed the plugin only works with tile layers but I needed it to work with tiles and geojson so I made a small modification. If anyone wants to do the same it's quite straightforward:

Replace line 79 in Control.Opacity.js:

opacity_layer.setOpacity(slider_value);

with

if (typeof opacity_layer._url === 'undefined'){
    opacity_layer.setStyle({
            opacity:slider_value,
            fillOpacity: slider_value
        });
}else{
    opacity_layer.setOpacity(slider_value);
}

There may be a better way to identify non-tile layers, if so let me know.

eltonsantos commented 6 years ago

It work!!! Thanks!! This plugin is wonderful :D

A doubt, how do it without plugin? I have a geojson and try change the opacity chaging the button, but it dont work anyway.

<input type="range" id="sldOpacity" min="0" max="1" step="0.1" value="0.5" />

$('#sldOpacity').on('change', function(){
        $('#image-opacity').html(this.value);

        geojson.setOpacity(this.value);

    });
geojson = L.geoJson(statesData, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(map);

I tried put opacity: opacity and create a function opacity() but dont work too. What I have do?