How to Set Transparency on ClassBreaksRenderer Levels Using Jquery UI Slider

643
5
05-10-2018 09:11 AM
BehrouzHosseini
Occasional Contributor

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

  });
0 Kudos
5 Replies
KenBuja
MVP Esteemed Contributor

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

0 Kudos
BehrouzHosseini
Occasional Contributor

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 

0 Kudos
KenBuja
MVP Esteemed Contributor

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.

0 Kudos
BehrouzHosseini
Occasional Contributor

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!

0 Kudos
KenBuja
MVP Esteemed Contributor

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.