I've uploaded GeoJSON to Esri cloud and created a feature layer. Now I'm able to plot the featurelayer into my map. I'm trying to color each feature based on measures which comes from my DB. Here is link to jsfiddle
Let's say we are going to add a measure, i.e., Profit of the state Texas is 100. So I'd like to add {'Profit':100} as a field to the Feature.
Here is the code,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Data-driven continuous color - 4.7</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script>
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
}
</script>
<script src="https://js.arcgis.com/4.7/"></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/widgets/Legend",
"esri/Graphic",
"esri/tasks/support/Query",
"esri/tasks/QueryTask",
"dojo/domReady!"
], function(
Map, MapView, FeatureLayer, Legend, Graphic, Query, QueryTask,
) {
var defaultSym = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
outline: { // autocasts as new SimpleLineSymbol()
color: "lightgray",
width: 0.5
}
};
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-85.050200, 33.125524],
zoom: 6
});
var openSpacesRenderer = {
"type": "class-breaks",
"field": "CENSUSAREA",
"classBreakInfos": [
{
"symbol": {
"color": [
45,128,120,255
],
"outline": {
"width": 0
},
"type": "simple-fill",
"style": "solid"
},
"label": "0 to 1,629",
"minValue": 0,
"maxValue": 100000
},
{
"symbol": {
"color": [
173,212,106,255
],
"outline": {
"width": 0
},
"type": "simple-fill",
"style": "solid"
},
"label": "> 1,629 to 3,754",
"minValue": 100001,
"maxValue": 200000
},
{
"symbol": {
"color": [
226,235,211,255
],
"outline": {
"width": 0
},
"type": "simple-fill",
"style": "solid"
},
"label": "> 3,754 to 11,438",
"minValue": 200001,
"maxValue": 1000000
}
]
}
var featureLayer = new FeatureLayer({
url: "https://services9.arcgis.com/JPp8avz1ETW9XJJr/arcgis/rest/services/USA_Outline/FeatureServer/0",
outFields: ["*"],
renderer: openSpacesRenderer
});
map.add(featureLayer);
let graphics;
view.when(featureLayer).then(function(layerView) {
//debugger;
layerView.watch("updating", function(value) {
if (!value) { // wait for the layer view to finish updating
// query all the features available for drawing.
layerView.queryFeatures({
geometry: view.extent,
outFields: ["*"],
returnGeometry: true
}).then(function(results) {
for(var r in results){
results[r].attributes['profit']= Math.random()*100
console.log(results[r].attributes);
}
}).catch(function(e) {
console.error("query failed: ", e);
});
}
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Now in the for loop I'm trying to add a attribute profit with what we have. Then if I change field variable of openSpacesRenderer as profit, it is not working. How can I add a new field to the existing feature layer?
