I have been trying to color individual colors graphics which are added using client-side graphics in the feature layer. but the symbol property of the graphic is overwritten by the renderer property of the feature layer.
I have taken the source as the array of graphics with a symbol property of simpleMarkerSymbol . simpleMarkerSymbol Provides different colors to the symbol based on the values it gets from the backend. So I want to color individual graphics once the cluster_number is equals to 1.
this.mapNodes.forEach((node,i)=>{ // this.mapNodes is the data from API
this.simpleMarkerSymbol = {
type: "simple-marker",
color: node.colorCode,
style: "circle",
size: "10px",
outline: {
color: node.colorCode,
width: 3
}
};
let point = new Point({ x: node.longitude, y: node.lattitude });
let graphic = new Graphic({
geometry: point,
symbol: this.simpleMarkerSymbol,
attributes: {
name: node.nodeName,
color:node.colorCode
},
});
this.graphics.push(graphic);
});
var action:any = {
id: MapViewConstant.FIND_FEATURES,
title: "Open-Chart",
};
this.nodeLayer=new FeatureLayer({
featureReduction:MapViewConstant.clusterConfig,
source:this.graphics,
fields:MapViewConstant.fields,
objectIdField:MapViewConstant.OBJECT_ID,
popupTemplate: {
title: "{name}",
actions:[action]
},
renderer:MapViewConstant.renderer // it provides grey color to all the features
});
this.Map.add(this.nodeLayer);
