Change Field being used in renderer

jaykapalczynski

I am trying to control the field being used in a ClassBreaksRenderer...no luck so far

I tried to write a value to a variable and then set the FIELD: someVariable

As you see below I am hardcoding the field name...but I want this to be dynamic based on a value that I choose from a drop down....

On the event listener of the drop down I want to update the Field that is being referenced by the ClassBreaksRenderer....

Anyone have any thoughts or examples?  Thank you in Advanced.

 

var rendererPolygon = new ClassBreaksRenderer({
  type: "class-breaks",
  // attribute of interest
  field: "Field4"
});
// All features with magnitude between 0 - 4.0
rendererPolygon.addClassBreakInfo({
  minValue: 0,
  maxValue: 1,
  symbol: {
    type: "simple-fill",  
    color: [65,105,225,.5],    // Light Blue
	style: "solid",
    outline: {
       width: 0.1,
       color: "gray"
    }
  }
});

 

jaykapalczynski

1. Declare Variable
2. Set variable to the field property in Renderer
3. In my case I had to get the real field name...passed the value from the dropdown box to a function and RETURN the real field name
4. I did #3 above with a listener on change of the Dropdown box
5. I set that to the renderer... rendererPolygon.field = returned real name
6. Then add the layer to the map

Any questions hit me up....

 

var speciesChoosen2, originalSpecies;
var fieldChoosen = "";  // varaible holding field value to render on

var rendererPolygon = new ClassBreaksRenderer({
  type: "class-breaks",
  field: fieldChoosen
});
const monumentLayer = new FeatureLayer({
     title: "National Monuments",
     fields: [
       {
         name: "OBJECTID",
         alias: "ObjectID",
         type: "oid"
       }
     ],
     objectIdField: "OBJECTID",
     geometryType: "polygon",
     source: resultsPolygonLayer2.graphics, 
     renderer: rendererPolygon,
     popupTemplate: {
         title: '"{' + fieldChoosen + '}"'
     }
});

// SNIP

Function getFieldName(typeName){
if (typeName == "some value") {
	fieldChoosen = "field1";
	return "field1";
} 
else if (typeName == "typeName") {
	fieldChoosen = "field2";
	return "field2";
}
else {
	fieldChoosen = "";
	return "nothing found";
}
};

// SNIP

dropdownSelect.addEventListener("change", function() {
     var type = event.target.value;			
     var e = document.getElementById("well-type");
     originalSpecies = e.value;
     var fieldValue2 = getFieldName(originalSpecies);
     speciesChoosen2 = fieldValue2;
     fieldChoosen = speciesChoosen2;
     rendererPolygon.field = speciesChoosen2;


// SNIP
// Noting that this is all done before adding the layer to the map. Its all about timing.
function addFeatureLayer(){
    map.add(monumentLayer);
    monumentLayer.refresh();
}