Community

FeatureLayer renderer only changes when zooming

1497
8
Jump to solution
12-11-2017 02:29 AM
KeniHan
by
New Contributor II
‎12-11-2017 02:29 AM

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>
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-11-2017 09:16 AM

Keni,

  It turned out to be a simple syntax error on your end line 2 below you had outFiedls: ["*"],

    layer = new FeatureLayer(layerState_url, {
      outFields: ["*"],
      id: "temp_mean_state",
      opacity: 0.9,
      maxScale: 1200000
    });‍‍‍‍‍‍

View solution in original post

8 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-11-2017 06:36 AM

Keni,

  It would help to see your html code too.

0 Kudos
KeniHan
by
New Contributor II
‎12-11-2017 06:45 AM
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Weather data visualization</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
</head>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

#applicationDiv {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}

#mapDiv {
flex: 1 1 auto;
order: 1;
}
#timeInfo{
border-radius: 4px;
border: solid 2px #ccc;
background-color: #fff;
display: block;
padding: 5px;
position: relative;
text-align: center;
width: 1000px;
z-index: 99;
}

#titleDiv {
font-weight: 400;
font-style: normal;
font-size: 1.2019rem;
padding: 10px;
}

#sliderContainer {
flex: 0 0 80px;
order: 2;

display: flex;
flex-flow: row;

padding: 0 12px;
}

#sliderValue {
flex: 0 0 100px;
order: 1;

display: flex;
justify-content: center;
flex-direction: column;
text-align: center;

font-size: 300%;
}

#sliderInnerContainer {
flex: 1 1 auto;
order: 2;

display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px;
}

#sliderLabels {
flex: 1 1 auto;
order: 1;

display: flex;
justify-content: space-between;
margin-top: 20px;
}

#rangeWrapper {
flex: 1 1 auto;
order: 2;

position: relative;
padding: 0 20px;
}

#slider {
width: 100%;
}

/**
* Play/Stop toggle button
*/

#playButton {
flex: 0 0 100px;
order: 3;

margin: 20px 0;
}

.toggle-button {
display: flex;
}

.toggle-button.toggled .toggle-button-icon {
color: #CC1B1B;
}

.toggle-button .toggle-button-icon {
color: #1BCC1B;
}

.toggle-button> :nth-child(2) {
display: none;
}

.toggle-button.toggled> :nth-child(1) {
display: none;
}

.toggle-button.toggled> :nth-child(2) {
display: block;
}

/**
* Hover tooltip
*/

.tooltip {
position: absolute;
pointer-events: none;
transition: opacity 200ms;
}

.tooltip>div {
margin: 0 auto;
padding: 12px;
border-radius: 4px;
box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.75);
transform: translate3d(-50%, -125%, 0);
}
</style>
<body class = "claro">
<div id="applicationDiv">
<div id="mapDiv">
<div id="titleDiv" class="esri-widget">Weather data visualization</div>
<div id="fullScreenButton" class="esri-widget esri-widget-button">
<span class="esri-icon-zoom-out-fixed" aria-label="fullscreen icon"></span>
</div>
<div id="locateButton" class="esri-widget esri-widget-button">
<span class="esri-icon-checkbox-unchecked" aria-label="locate icon"></span>
</div>
</div>
<div id="sliderContainer" class="esri-widget">
<span id="sliderValue"></span>
<div id="sliderInnerContainer">
<div id="sliderLabels">
<span>1881</span>
<span>2016</span>
</div>
<div id="rangeWrapper">
<input id="slider" type="range" min="1881" max="2016" step="1" />
</div>
</div>
<div id="playButton" class="esri-widget esri-widget-button toggle-button">
<div><span class="toggle-button-icon esri-icon-play" aria-label="play icon"></span> Play</div>
<div><span class="toggle-button-icon esri-icon-pause" aria-label="pause icon"></span> Pause</div>
</div>
</div>
</div>
</body>
</html>
0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-11-2017 07:14 AM

Keni,

   Use layer.refresh() not layer.redraw().

0 Kudos
KeniHan
by
New Contributor II
‎12-11-2017 07:23 AM

Hi Robert,

thanks! that did help. But the reason I used redraw() is that it only changes the color of the feature instead of drawing the graphics again when using refresh(), which saves time. Since responding time is very crucial in my application as to make a smooth animation. This works in another application but I don't know why redraw() does not make changes.

I think that when zooming, it calls refresh().

Do you know any other way to render faster?

Thanks.

Keni

RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-11-2017 08:33 AM

Keni,

   I was trying to do some testing and debugging on this for you but it seems you have changed the layer access permissions now.

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-11-2017 09:16 AM

Keni,

  It turned out to be a simple syntax error on your end line 2 below you had outFiedls: ["*"],

    layer = new FeatureLayer(layerState_url, {
      outFields: ["*"],
      id: "temp_mean_state",
      opacity: 0.9,
      maxScale: 1200000
    });‍‍‍‍‍‍
KeniHan
by
New Contributor II
‎12-11-2017 09:42 AM

Hi Robert,

thanks a lot, things are solved. Should have been more careful!

Best

Keni

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-11-2017 09:42 AM

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

0 Kudos