Change Layer opacity in the map via Slider

[AldwinGregorio]

Is it possible to change the opacity of the layer using a horizontal slider? I tried the setOpacity() method of the featureLayer but nothing really changes in the opacity of the layer. Is there any way to do this? TIA  

Please note that this is a Feature Layer that i needed to change the opacity depends on the user input.  

[MKF62 · Accepted solution]

Are you using 4.6 or 3.23? Sounds like 3.23 based on the setOpacity() method you're trying to use. Got any code to share?

I don't have a slider, but I've got some radio buttons set up that allow the user to change opacity in 3.23. I would like to use a slider but haven't gotten around to it yet. 

The JS:

      on(query('input[name="setOpacity"]'), "click", function(evt){
          var opacity = evt.target.id;
          switch(opacity){
              case "100-percent":
                  patchesFL.setOpacity(1);
                  break;
              case "25-percent":
                  patchesFL.setOpacity(.25);
                  break;
              case "50-percent":
                  patchesFL.setOpacity(.50);
                  break;
              case "75-percent":
                  patchesFL.setOpacity(.75);
          }
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The HTML:

<div id="opacity">
     <h5>Opacity</h5>
     <input type="radio" id="100-percent" name="setOpacity" value="100" checked>0%
     <input type="radio" id="75-percent" name="setOpacity" value="25">25%
     <input type="radio" id="50-percent" name="setOpacity" value="50">50%
     <input type="radio" id="25-percent" name="setOpacity" value="75">75%
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AldwinGregorio]

I tried the setOpacity() method for the Layer but nothing really happens. I 'm trying to modify/twitch the codes of the LayerList Widget from Web AppBuilder. I browse all the resources from the project and I can't see any declaration of "new LayerList()" anywhere in the document. 

var horSlider = new HorizontalSlider({
 minimum: 0,
 maximum: 1.0,
 discreteValues: 20,
 value: 100,
 intermediateChanges: false,
 onChange: function (value) {
nodeAndSubNode.layer.setOpacity(Math.round(value));
 },
 style: {
 width: '85%',
 'margin-left' : '30px'
 }
 }, nodeAndSubNode.horizontalSlider).startup();‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[deleted-user-gqr_hXrLM2-m]

Hi Gregorio,

In version 3.23 of the API, you can use the 'LayerList' widget to create a layer list of the operational layers within your web application. Follow this link to go to the page for the 'LayerList' in the API Reference: 

LayerList | API Reference | ArcGIS API for JavaScript 3.23 

When constructing the layer list in your code, there is a property called 'showOpacitySlider', which accepts a Boolean value indicating whether or not to show a horizontal opacity slider for each of the operational layers that have been added to the layer list in the 'layers' portion of the constructor. If this property is set to 'true', a horizontal opacity slider will be viewable for each of the operational layers within the layer list.

I hope this helps.

-Jacob

[AldwinGregorio]

Hi Jacob,

Thank you! Just checked the API Reference for LayerList. Yep there is indeed a property for enabling opacity slider, however, I'm trying to twitch the behind codes of the LayerList widget from Web AppBuilder and apparently LayerList class was never used in the project. LayerListView was user but not LayerList. Do you have any idea or suggestion if I can still use this propert of LayerList. Thank you!  

[RobertScheitlin__GISP]

Aldwin,

  WAB does not use the JS apis LayerList Dijit. It uses its own classes. You can set Opacity using the jimu/LayerInfo setOpacity method. You should post WAB questions in the WAB space if you want WAB specific answers.

[AldwinGregorio]

I tagged the question to JavaScript space since I'm customizing from a downloaded web appbuilder item. Yep, I already checked the properties from the web appbuilder and indeed, there's no option for enabling layers and its sublayers in the Layer List. 

In anyway, the only solution I made was to add slider in each layers (not sublayers) and setOpacity on its onChange event.