topic Re: FeatureLayer renderer only changes when zooming in ArcGIS JavaScript Maps SDK Questions

FeatureLayer renderer only changes when zooming

KeniHan — Mon, 11 Dec 2017 10:29:16 GMT

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

 layerState_url = "https://services.arcgis.com/CHWy5Vg5bILt6ufC/arcgis/rest/services/shpTemperature_Mean_S_C/FeatureServer/0"
 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>

Re: FeatureLayer renderer only changes when zooming

RobertScheitlin__GISP — Mon, 11 Dec 2017 14:36:53 GMT

Keni,

It would help to see your html code too.

Re: FeatureLayer renderer only changes when zooming

KeniHan — Mon, 11 Dec 2017 14:45:03 GMT

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

Re: FeatureLayer renderer only changes when zooming

RobertScheitlin__GISP — Mon, 11 Dec 2017 15:14:00 GMT

Keni,

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

Re: FeatureLayer renderer only changes when zooming

KeniHan — Mon, 11 Dec 2017 15:23:27 GMT

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

Re: FeatureLayer renderer only changes when zooming

RobertScheitlin__GISP — Mon, 11 Dec 2017 16:33:52 GMT

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.

Re: FeatureLayer renderer only changes when zooming

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:07:55 GMT

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

Re: FeatureLayer renderer only changes when zooming

RobertScheitlin__GISP — Mon, 11 Dec 2017 17:42:24 GMT

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

Re: FeatureLayer renderer only changes when zooming

KeniHan — Mon, 11 Dec 2017 17:42:28 GMT

Hi Robert,

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

Best

Keni