ClassBreaksRenderer Not Refreshing

[chuckfrank]

Is it possible to modify the symbolization of a class breaks renderer?  My map has a feature layer with a class breaks render.  I'd like to change the class breaks renderer based on user input when a user changes a dropdown selection.  When I remove break info and add new break info, and do a refresh on the feature layer, nothing happens on the map.  If I zoom or pan I can see the legend change, but the map still looks the same.   Do I need to redraw the map or do a different sort of refresh?

Code example is below"

var myFeatureLayer = new FeatureLayer(myurl, {
     definitionExpression: "ID = 0",
     listMode: "hide",
     outFields: ["*"],
     opacity: 1.0,
     popupTemplate: myPopupTemplate,
     renderer: myClassBreaksRenderer,
     title: "Locations"
});

var myClassBreaksRenderer = new ClassBreaksRenderer({
     type: "class-breaks",
     field: "myField"
});

myClassBreaksRenderer.addClassBreakInfo({
     minValue: 0,
     maxValue: 21.0,
     symbol: {
          type: "simple-marker",
          color: [255, 255, 255, 1],
          size: 16,
          outline: {
               color: "yellow",
               width: 4
            }
        }
});
myClassBreaksRenderer.addClassBreakInfo({
     minValue: 22.0,
     maxValue: 27.0,
     symbol: {
          type: "simple-marker",
          color: [255, 255, 255, 1],
          size: 16,
          outline: {
               color: "orange",
               width: 4
            }
        }
});
myClassBreaksRenderer.addClassBreakInfo({
     minValue: 28.0,
     maxValue: 29.0,
     symbol: {
          type: "simple-marker",
          color: [255, 255, 255, 1],
          size: 16,
          outline: {
               color: "darkred",
               width: 4
            }
        }
});

map.add(myFeatureLayer);

// code below is to remove the original 0-21 yellow marker and add a green
// marker to replace it.
$("#mySelect").change(function () {
     myClassBreaksRenderer.removeClassBreakInfo(0, 21.0);

     myClassBreaksRenderer.addClassBreakInfo({
          minValue: 0,
          maxValue: 21.0,
          symbol: {
               type: "simple-marker",
               color: [255, 255, 255, 1],
               size: 16,
               outline: {
                    color: "green",
                    width: 4
                }
          }
     });
     // expect to see the symbol change but there is not visible difference
     myFeatureLayer.refresh();

});

[Anonymous User]

Try referencing your FeatureLayers.renderer property like

myFeatureLayer.renderer.removeClassBreakInfo(0, 21.0);

myFeatureLayer.renderer.addClassBreakInfo({
          minValue: 0,
          maxValue: 21.0,
          symbol: {
               type: "simple-marker",
               color: [255, 255, 255, 1],
               size: 16,
               outline: {
                    color: "green",
                    width: 4
                }
          }

[Anonymous User · Accepted solution]

I decided to make a codepen and explore this a little more and turns out that removing and adding in the manner I suggested above didn't work.  I took it one step further and tried getting the layer from the layers array, but that didn't do anything except add more code.  I created a second renderer with the new values, and just assigned the layer's renderer to the new one and it worked.  Maybe there is something broken in the remove and add methods because they do add and remove as the console indicates, but nothing happens in the map or legend.

Update Classbreaks | Renderer 

[chuckfrank]

Thank you Jeff!  It appears that creating a new class breaks renderer and setting in the feature layer followed by a refresh is working.  I've written a function that builds a renderer and class breaks info based on user selections and it seems to work reliably.   I never had luck with the "removeClassBreakInfo", but defining an entirely new set of classBreaksInfo is more clear.