How to Set Transparency on ClassBreaksRenderer Levels Using Jquery UI Slider

Question

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

kenbuja · Answer

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.

BehrouzHosseini · Answer

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!

kenbuja · Answer

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.