Modifying a FeatureLayer then rendering results

VincentLantaca1 — Sun, 12 Dec 2021 02:30:24 GMT

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.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
 name="viewport"
 content="initial-scale=1,maximum-scale=1,user-scalable=no"
 />
    <title>Intro to FeatureLayer - 4.13</title>

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

Re: Modifying a FeatureLayer then rendering results

VincentLantaca1 — Thu, 31 Oct 2019 16:48:47 GMT

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

topic Modifying a FeatureLayer then rendering results in ArcGIS JavaScript Maps SDK Questions

Modifying a FeatureLayer then rendering results

Re: Modifying a FeatureLayer then rendering results