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>
Solved! Go to Solution.
I figured out what the problem was. I needed to just create a new FeatureLayer using new graphics.
I figured out what the problem was. I needed to just create a new FeatureLayer using new graphics.