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