1

I am displaying a leaflet base map. I am using an HTML5 slider to set the opacity to a layergroup but it is not working.

I was wondering what I'm doing wrong.

Thanks in advance!

    <h3>TF.Landscape</h3>
    <br><input type="button" value=" + " onclick="BaseMapAsLayerGroup('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png')">
    <br><input id="slide" type="range" min="0" max="1" step="0.1" value="0" onchange="updateOpacity(this.value)">

    <hr>
    <div id="map" style="width: 800px; height: 600px"></div>

    <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script>
    <script>

        var map;
        var capa;

        function BaseMapAsLayerGroup(url){
            if(!map) { 
                map = L.map('map').setView([-41.2858, 174.78682], 14); 
            }

            capa = new L.LayerGroup();
            L.tileLayer(url, {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
            maxZoom: 18
            }).addTo(capa);

                map.addLayer(capa);
        }

        function updateOpacity(value) {
            capa.opacity(value);
        }

    </script>
timbo
  • 13,244
  • 8
  • 51
  • 71
Patricio Carvajal H.
  • 361
  • 2
  • 6
  • 20

2 Answers2

2

I think you want to set the opacity of the layer (capa) and not the map. That variable would need to be scoped differently for this to work. A quick way to do this would be to declare capa just under the var map at the top of the script.

function updateOpacity(value) {
    capa.opacity(value);
}

EDIT:

I think this fiddle illustrates what you are trying to do. There's a couple things that were missing/wrong with the code as it was in the original post including omitting a link to the CSS that is needed for the leaflet library.

Single Layer controlled by its own slider

EDIT:

Two Layers, each controlled by their own slider

Jason Koopmans
  • 611
  • 6
  • 19
  • yeah, I want to set the opacity of the layer (capa). I did what you told me, but it doesn't work. (original code is updated) – Patricio Carvajal H. Jul 07 '15 at 13:33
  • works perfect with one layer, but what if I am using two different layers (with different maps) and I want to set the opacity by separate? – Patricio Carvajal H. Jul 07 '15 at 20:19
  • Do you mean: > single slider changes the opacity of more than one layer (possibly a layer group) > a slider per layer, each controlling its respective layer – Jason Koopmans Jul 07 '15 at 21:20
  • yeah, that's what I meant. Sorry english is not my native language. – Patricio Carvajal H. Jul 08 '15 at 12:24
  • I added another fiddle. This one has two independant layers (not a layer group) each controlled by their own slider. It wasn't clear from your comment which example you were interested in -- I did that one first. – Jason Koopmans Jul 09 '15 at 14:16
0

One other way to change the opacity could be to use the setstyle function. Hence for your case, try this

function updateOpacity(value) {
    capa.setStyle({opacity:value});
}
muzaffar
  • 1,706
  • 1
  • 15
  • 28