Change Layer opacity in the map via Slider

1962
6
Jump to solution
04-11-2018 11:20 PM
AldwinGregorio
New Contributor III

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.  


0 Kudos
1 Solution

Accepted Solutions
MollyFoley
Regular Contributor

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>‍‍‍‍‍‍‍

View solution in original post

6 Replies
MollyFoley
Regular Contributor

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
New Contributor III

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();
0 Kudos
deleted-user-gqr_hXrLM2-m
New Contributor II

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
New Contributor III

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!  

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
AldwinGregorio
New Contributor III

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.  

0 Kudos