Legend Displays Wrong Symbol

Question

Using arcgis js 4.16 legend widget. I have a two tile layers added to the map. For some reason one of the layers gets the symbol from the opposite tile layer. For example, one layer is a tile layer of sanitary sewer and the other is parcels. The sanitary sewer's legend symbol is shown as the parcel's symbol. See pic below. The basic code used is below. Anyone have an idea what would cause this? var parcelLayer = new TileLayer({ url: "" }); var sanitary = new TileLayer({ url: "" }); var map = new Map({ basemap: basemap, layers:[parcelLayer, sanitary] }); var view = new MapView({ container: "sceneDiv", map: map, center: [] }); var legend = new Legend({ view: view, layerInfos: [{ layer: sanitary, title: "Legend" },{ layer: parcelLayer }] });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

NilsBabel1 · Answer

I'm having the same problem.  Any update?  This post seems to describe the problem.  https://community.esri.com/t5/arcgis-api-for-javascript/wrong-symbology-in-4-17-legend-widget/m-p/168924/highlight/false#M15656

However, I'm not able to implement the workaround.  This seems like a bug that esri needs to address.

BenRomlein · Answer

Did you manage to resolve this or find a workaround? I noticed this in my app as well.

From what I can tell, it happens only when using TileLayers and usually related to adjusting opacity of a layer above the bottom layer.

Here's a pen I made to try to duplicate the issue (you need to sign in to arcgis online to load the Ecophysiography layer): https://codepen.io/broms/pen/BaKdXaj

When I load the pen, the symbology is correct, but as soon as I pan the map, it duplicates. Removing and re-adding the layers fixes it, but then adjusting their transparency causes problems again (either the layer disappears entirely from the legend, or the symbology duplicates)

I believe it's a bug in either TileLayer or in Legend. Happy to try to gather more info for a bug report/fix.