topic How to Set Transparency on ClassBreaksRenderer Levels Using Jquery UI Slider in ArcGIS JavaScript Maps SDK Questions

How to Set Transparency on ClassBreaksRenderer Levels Using Jquery UI Slider

BehrouzHosseini — Sat, 11 Dec 2021 12:47:51 GMT

I am trying to apply opacity to Breaks of ClassBreaksRenderer based on jQuery UI Slider and I used the

transRange1.setOpacity(1)

for setting this but I am getting this error

sandbox.html:57 Uncaught TypeError: transRange1.setOpacity is not a function

Can you please let me know how to fix this?

require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "esri/renderers/ClassBreaksRenderer",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/Color",
     "esri/renderers/TemporalRenderer",
    "dojo/domReady!"
  ],
  function(
    Map,
     FeatureLayer,
     ClassBreaksRenderer,
     SimpleMarkerSymbol,
     SimpleLineSymbol,
     SimpleFillSymbol,
     Color,
     TemporalRenderer
  ) {

    var map = new Map("map", {
      basemap: "topo",
      center: [-82.44109, 35.6122],
      zoom: 17
    });

    var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0",{
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: [ "*" ]   
    });
    
    var transRange1 = 0;
    var transRange2 = 0;
    
     var observationRenderer = new ClassBreaksRenderer(new SimpleMarkerSymbol(), "Ht_DBH_ft");
          observationRenderer.addBreak(3, 6, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([55,0,55])),new Color([55,0,55,transRange1])));

          observationRenderer.addBreak(0, 3, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([65,105,225])),new Color([65,105,225,transRange2])));

         var renderer = new TemporalRenderer(observationRenderer, null, null, null);
          featureLayer.setRenderer(renderer);
    $( "#slider-range" ).slider({
      min: 1,
      max: 6,
      step: .0001,
      value: 3 ,
      slide: function( event, ui ) {
      $( "#range" ).val(  ui.value );

       if(ui.value > 1 && ui.value < 3 ){
         transRange1 = 1;
         transRange2 =0;
               transRange1.setOpacity(1)
       }
      if(ui.value > 4 && ui.value < 6 ){
         transRange2 = 1
         transRange1 =0;
       }
      }
    });
    $( "#range" ).val(  $( "#slider-range" ).slider( "value" ) );

    map.addLayer(featureLayer);

  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to Set Transparency on ClassBreaksRenderer Levels Using Jquery UI Slider

KenBuja — Thu, 10 May 2018 16:25:53 GMT

You're attempting to set the opacity of a number variable (transRange1) instead of featureLayer.

Re: How to Set Transparency on ClassBreaksRenderer Levels Using Jquery UI Slider

BehrouzHosseini — Thu, 10 May 2018 16:31:19 GMT

Thanks for reply Ken, but by setting

featureLayer.setOpacity(1);

will apply the opacity to entire featyrelayer which I do not mean to. What I want to do is filtering display of features based on addBreak values and slider move

Re: How to Set Transparency on ClassBreaksRenderer Levels Using Jquery UI Slider

KenBuja — Thu, 10 May 2018 17:04:16 GMT

Thanks for the clarification...I didn't scroll far enough right on your code. You should be able to change the colors in the renderer with the new opacity levels using the visualVariables property and the setVisualVariables method.

Re: How to Set Transparency on ClassBreaksRenderer Levels Using Jquery UI Slider

BehrouzHosseini — Sat, 11 Dec 2021 12:47:53 GMT

I tried to set all points transparent on load by using

setVisualVariables

    var renderer = new TemporalRenderer(observationRenderer, null, null, null);
    renderer.setVisualVariables([{
    type: "opacityInfo",
    field: "Ht_DBH_ft",
"stops": [{
               "value": 1,
               "opacity": 0
            }, {
               "value": 2,
               "opacity": 0
            },
            {
               "value": 3,
               "opacity": 0
            },{
               "value": 4,
               "opacity": 0
            },{
               "value": 5,
               "opacity": 0
            },{
               "value": 6,
               "opacity": 0
            }]
  }]);
     
    featureLayer.setRenderer(renderer);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

but I am still seeing all the points on the Map!

Re: How to Set Transparency on ClassBreaksRenderer Levels Using Jquery UI Slider

KenBuja — Sat, 11 Dec 2021 12:47:56 GMT

Yes, I'm having difficulty working with the setVisualVariables using this sample, where it's not working as expected

var renderer = new ClassBreaksRenderer(symbol, "POP07_SQMI");
renderer.addBreak(0, 25, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
renderer.addBreak(25, 75, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
renderer.addBreak(75, 175, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
renderer.addBreak(175, 400, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
renderer.addBreak(400, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));

renderer.setVisualVariables([{
  "type": "opacityInfo",
  "field": "POP07_SQMI",
  "stops": [{
    "value": 25,
    "opacity ": 1
  }, {
    "value": 75,
    "opacity ": .25
  }, {
    "value": 175,
    "opacity ": 0
  }]
}]);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This is the output I get regardless of how I change the opacity for each stop.