Javascript 4.x legend refresh

Mr_Kirkwood

I am using JS 4.30. I would like ot figure out how to get the legend to update the symbology of what is in the map when zoomed in. The legend for one of my layers has over 200 symbols. I have a fucntion to zoom into a specific building and floor. That building and floor does not have all 200 symbols it only has 10. I would like the legedn to update and show only the 10 symbols in the map.

The print funtion does this see attached. 

I appreciate any help Thank you! 

LegendB.JPG

LegendA.JPG

SahilBhouraskar_0-1738110099128.png

CorinneNelson1_1-1738108861428.png

JoelBennett

You could use something like this, which appears to do the trick.  Basically, after every time the layer redraws, a new renderer is created with only the symbology visible in the view, and then assigned to the layer.  Just pass in references to your featureLayer and view and it does the rest:

function manageDynamicSymbology(featureLayer, view) {
	featureLayer.when(function() {
		view.whenLayerView(featureLayer).then(function(layerView) {
			var originalRenderer = featureLayer.renderer;
			var ignoreRendererSet = false;

			layerView.watch("updating", function(newValue, oldValue, propertyName, target) {
				if ((!newValue) && (oldValue)) {
				  if (ignoreRendererSet)
				    ignoreRendererSet = false;
				  else {
				    ignoreRendererSet = true;

				    var query = layerView.createQuery();
				    query.geometry = view.extent;
  
  					layerView.queryFeatures(query).then(function(featureSet) {
  						if (featureSet.features.length === 0)
  							featureLayer.renderer = originalRenderer;
  						else {
  							var promises = [];
  
  							featureSet.features.forEach(function(feature) {
  								promises.push(originalRenderer.getUniqueValueInfo(feature));
  							});
  
  							Promise.all(promises).then(function(infos) {
  								var uniqueValueInfos = [];
  								var defaultSymbol = null;
  								var defaultLabel = null;
  
  								infos.forEach(function(uniqueValueInfo) {
  								    if (!uniqueValueInfo) {
  								      if (defaultSymbol === null) {
  								        defaultSymbol = originalRenderer.defaultSymbol.clone();
  								        defaultLabel = originalRenderer.defaultLabel;
  								      }
  								    } else if (!uniqueValueInfos.includes(uniqueValueInfo))
  								      uniqueValueInfos.push(uniqueValueInfo);
  								});

  							  var newRenderer = featureLayer.renderer.clone();
  							  newRenderer.uniqueValueInfos = uniqueValueInfos;
  							  newRenderer.defaultSymbol = defaultSymbol;
  							  newRenderer.defaultLabel = defaultLabel;

  							  featureLayer.renderer = newRenderer;
  							});
  						}
  					}, function(e) {
  						featureLayer.renderer = originalRenderer;
  					});
				  }
				}
			});
		});
	});
}