AnsweredAssumed Answered

FeatureLayer renderer only changes when zooming

Question asked by ga47big on Dec 11, 2017
Latest reply on Dec 11, 2017 by ga47big

JS API 3.22

When I use redraw() after setting the new renderer field, the visualization does not change on turn into complete grey. But when I zoom in or out, the visualization came back again.

<script>
require([
"dojo/_base/array",
"dojo/dom",
"dojo/number",
"dojo/on",
"esri/basemaps",
"esri/Color",
"esri/dijit/Basemap",
"esri/dijit/BasemapGallery",
"esri/dijit/ColorInfoSlider",
"esri/dijit/util/busyIndicator",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"esri/map",
"esri/plugins/FeatureLayerStatistics",
"esri/renderers/smartMapping",
"esri/renderers/SimpleRenderer",
"esri/Color",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/renderers/smartMapping",
"dojo/domReady!",
"esri/TimeExtent",
"esri/dijit/TimeSlider",
"esri/layers/ArcGISDynamicMapServiceLayer"
], function (
array, dom, number, on,
esriBasemaps, Color, Basemap, BasemapGallery, ColorInfoSlider, busyIndicator,
InfoTemplate, FeatureLayer, Map, FeatureLayerStatistics, smartMapping, SimpleRenderer,Color,
SimpleFillSymbol, SimpleLineSymbol,TimeExtent, TimeSlider,ArcGISDynamicMapServiceLayer
){
var map = new Map("mapDiv",{
basemap:"osm",
scale: 10000000,
center: [10.2025,51.161],
slider: false
});

var layer = new FeatureLayer(layerState_url,{
outFiedls: ["*"],
id: "temp_mean_state",
opacity: 0.9,
maxScale: 1200000
});
var applicationDiv = document.getElementById("applicationDiv");
var fullScreenButton = document.getElementById("fullScreenButton");
var slider = document.getElementById("slider");
var sliderValue = document.getElementById("sliderValue");
var playButton = document.getElementById("playButton");
var titleDiv = document.getElementById("titleDiv");
var loaded = false;

function createRender(year){
var field = "Temperature_Mean_Y"+year;
console.log(field);
smartMapping.createClassedColorRenderer({
layer: layer,
field: field,
basemap: map.getBasemap(),
classificationMethod: "equal-interval"
}).then(function (response) {
layer.setRenderer(response.renderer);
layer.redraw();
});
}
map.addLayer(layer);
layer.on("load",function(){
setGapYear(1894);
})

function setGapYear(year){
sliderValue.innerHTML=year;
createRender(year);
}
function inputHandler(e){
setGapYear(e.target.value);
}

slider.addEventListener("change",inputHandler);
});
</script>

Outcomes