topic Re: Change Layer opacity in the map via Slider in ArcGIS JavaScript Maps SDK Questions

Change Layer opacity in the map via Slider

AldwinGregorio — Thu, 12 Apr 2018 06:20:38 GMT

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.

Re: Change Layer opacity in the map via Slider

MKF62 — Sun, 12 Dec 2021 02:09:09 GMT

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

Re: Change Layer opacity in the map via Slider

deleted-user-gqr_hXrLM2-m — Thu, 12 Apr 2018 15:15:49 GMT

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

Re: Change Layer opacity in the map via Slider

AldwinGregorio — Sun, 12 Dec 2021 02:09:12 GMT

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();‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change Layer opacity in the map via Slider

AldwinGregorio — Fri, 13 Apr 2018 03:34:33 GMT

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!

Re: Change Layer opacity in the map via Slider

RobertScheitlin__GISP — Fri, 13 Apr 2018 11:40:53 GMT

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.

Re: Change Layer opacity in the map via Slider

AldwinGregorio — Mon, 16 Apr 2018 01:41:30 GMT

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.