1

I have this JSFiddle that has a couple of layers and then a box after it where my opacity slider would be if all the correct external resources were loaded in.

In the 'Cities layer 2' layer parameters I have changed the parameters as so:

var vectorLayer2 = new ol.layer.Vector({
    source: vectorSource2,
    name: 'Cities Layer 2',
    visible: true,
    slider: false
});

I was hoping by doing so when I initialise my layer tree I could query the layer and if the 'slider' parameter was set to true then it would show the slider, and if it was false then it would hide the slider but I'm not sure exactly how to write this?

This also might not be the best way to go around this so I welcome any other alternative solutions.

  • Set the Visibility-Button to a checkbox and do something like with jquery $('#layervisiblitybutton).addCLass('display') in dependcy of layer.getVisible() – MichaelJS Jul 3 '15 at 8:32
  • ofc $('layersliderbutton).addClass.... – MichaelJS Jul 3 '15 at 8:38
  • Sorry @MichaelJS but I'm not sure how my question related to the visibility checkbox, I would like the slider to be there/ not there irrelevant of the visibility of the layer. Thanks for your response though. – Joshua Dickerson Jul 3 '15 at 9:05
  • Ah I see.^^ My fail. vectorLayer2.get('slider') (returns true/false) should work then. if(slider != false) { div += "<input style='width:80px;' class='opacity' type='text' value='' data-slider-min='0' data-slider-max='1' data-slider-step='0.1' data-slider-tooltip='hide'>"; } – MichaelJS Jul 3 '15 at 10:05
  • Thanks @MichaelJS, where does the vectorLayer2.get('slider') bit fit in within my JSFiddle? – Joshua Dickerson Jul 3 '15 at 12:46
2

@comments If you cant set a Parameter 'slider: false' for the Basic layer group (you are using map.getLayerGroup()) then you should just set the slider for all layers true resp. false/undefinded for the ones who shouldn't have a slider.

After that switch the If-statment.

   var slider = layer.get('slider');
   var name = layer.get('name') ? layer.get('name') : "Group";
   var div = "<li data-layerid='" + name + "'>" +
      "<span> " + layer.get('name') + "</span>" +
      "<i class='glyphicon glyphicon-eye-" + (layer.getVisible() ? 'open' : 'close' ) + "'> </i> ";
   if(slider) {
    div += "<input style='width:80px;' class='opacity' type='text' value='' data-slider-min='0' data-slider-max='1' data-slider-step='0.1' data-slider-tooltip='hide'>"; 
   }

see https://jsfiddle.net/mtwbs2dg/3/

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.