Modifying a FeatureLayer then rendering results

Question

I am trying to modify a Feature Layer that is created from data that is on a rest service. The goal is to add new attributes to each feature in-memory to create a visualization. I am trying to use queryFeatures with applyEdits, but I am having trouble. When I console.log the feature after I modify them, it looks correct, but it seems like the renderer can't find the new attribute. <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Intro to FeatureLayer - 4.13title> <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css"/> <script src="https://js.arcgis.com/4.13/">script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } style> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/layers/support/LabelClass", "esri/widgets/Legend" ], function(Map, MapView, FeatureLayer, LabelClass, Legend) { var map = new Map({ basemap: "gray" }); var view = new MapView({ container: "viewDiv", map: map, center: [-121.6555013,36.6777372], zoom: 13 }); var customLabels = new LabelClass({ labelExpression: "[BEAT_NO]", symbol: { type: "text", color: [255, 255, 255, 1], haloColor: [255, 255, 255, 1], haloSize: 0 } }) var featureLayer = new FeatureLayer({ url: "https://giswebservices.ci.salinas.ca.us/arcgis/rest/services/PublishedServices/PoliceBeats/MapServer/0", labelingInfo: customLabels }); featureLayer.queryFeatures().then(function(result){ console.log(result); var numFeatures = result.features.length; // arbitaryValues corresponds to the i'th feature in featureLayer var arbitraryValues = []; for (var i=0; i<numFeatures; i++){ arbitraryValues.push(i); } // add new fields to the features for (var i=0; i<numFeatures; i++){ result.features[i]['attributes']['newField'] = arbitraryValues[i]; } console.log(result.features); // change the renderer featureLayer.renderer = { type: "simple", symbol: { type: "simple-fill", outline: { color: [255, 255, 255, 1] } }, visualVariables: [ { type: "color", field: "newField", legendOptions: { title: "Some Arbitary Measurement" }, stops: [ { value: 1, color: "#000000", label: "1" }, { value: 12, color: "#FF0000", label: "12" } ] } ] } // use applyEdits edits = { updateFeatures: result.features } featureLayer.applyEdits(edits); // add the feature layer to the map map.add(featureLayer); view.ui.add( new Legend({ view: view }), "top-right" ); }); }); script> head> <body> <div id="viewDiv">div> body> html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

VincentLantaca1 · Accepted Answer

I figured out what the problem was. I needed to just create a new FeatureLayer using new graphics.