ArcGIS-Javascript-API use "color" property of each polygon feature in geoJSON file

Question

I am using ArcGIS Javascript API v4.17. My geoJSON file has "color" property defined for each feature. each feature is a polygon. I would like to color-code each polygon on the map using the color that is defined in geoJSON file. Could you help?

GeoJSON file:

{
 "type":"FeatureCollection",
 "features":[
 {
 "type":"Feature",
 "properties":{
 "color":"red"
 },
 "geometry":{
 "type":"Polygon",
 "coordinates":[
 [
 [-77.06818685702217,38.81969344450444],
 [-77.06761126974416,38.81970363664622],
 [-77.06762429634536,38.82015392436274],
 [-77.06819988724344,38.82014373205801],
 [-77.06818685702217,38.81969344450444]
 ]
 ]
 }
 },
 {
 "type":"Feature",
 "properties":{
 "color":"yellow"
 },
 "geometry":{
 "type":"Polygon",
 "coordinates":[
 [
 [-77.0666293687195,38.82557775397718],
 [-77.06605373350021,38.82558793973532],
 [-77.06606675302561,38.82603822744011],
 [ -77.06664239186607,38.82602804151912],
 [-77.0666293687195,38.82557775397718]
 ]
 ]
 }
 }
 ]}

Code I have so far:

const url = "localhost:8080/javascript/GeoJSON.json";
const renderer = {
 type : "simple",
 symbol : {
 type : "simple-fill",
 color : "green", 
 outline : { 
 color : "white",
 width : 0.7
 }
 }};
const geojsonLayer = new GeoJSONLayer({
 url : url,
 renderer : renderer, 
 opacity : 0.70,
 geometryType : "polygon"
 });
this.map.add(geojsonLayer);

The question is, how do I replace the color: "green" in the code to use the "color" property defined in my geoJSON file?

Answer 1

Case 1: the possible values are known

To display the features based on the different values in their "color" property, you can use UniqueValueRenderer (instead of the SimpleRenderer which displays all features with the same color). You would need to know what the possible values are in the geojson.

 const uniqueValuesByColorProperty = {
 type: "unique-value",
 field: "color", // the name of the property in your geojson
 defaultSymbol: {
 type: "simple-fill",
 color: "grey"
 },
 defaultLabel: "Other polygons", // used in the Legend widget for types not specified
 uniqueValueInfos: [{
 value: "red",
 symbol: {
 type: "simple-fill",
 color: "red"
 },
 label: "Red polygons" // displayed in the Legend widget
 },
 {
 value: "yellow",
 symbol: {
 type: "simple-fill",
 color: "yellow"
 },
 label: "Yellow polygons" // displayed in the Legend widget
 }
 ]
 };

Here's a running example.

Case 2: the possible values are unknown

If the possible values are dynamic, you can introspect the data on the fly, and create a new renderer based on the actual data.

1. Once the GeoJSONLayer is loaded, query the layer for distinct values.
2. Loop thru those distinct values to add each one to a UniqueValueRenderer.
3. Assign that renderer to your GeoJSONLayer.

Here's a running example.

• Lucy Zheng: Hi Bjorn, Thanks for your answer! Using "uniqueValueInfos" is useful if I know the possible values of all colors. But the use case that I am facing is, the color of each polygon is generated randomly on the backend, so I don't really know the possible values of the colors in GeoJSON. Is there any way in ArcGIS javascript API to display the color of each polygon directly from the property of geoJSON file?
• Bernd Loigge: did you find a solution for this?
• Bjorn Svensson: @BerndLoigge - I added a solution for the dynamic case.