topic [JSAPI 4.8 vs 4.7]LayerList with Legend widget shows unwanted text in ArcGIS JavaScript Maps SDK Questions

[JSAPI 4.8 vs 4.7]LayerList with Legend widget shows unwanted text

QiZhao — Sat, 11 Dec 2021 23:41:46 GMT

I'm trying to add Legend into LayerList widget, using the same method as this example. When I test this with a multi-layer webmap, there are some unwanted "legend" text shown in the LayerList. See the screenshot below.

These unwanted "legend" texts only exist in v4.8 API. v4.7 is working perfectly as expected. Also, if I clicked the toggle button to hide and show legend panel, those texts will be gone. This behavior is seen in both latest Chrome and MS Edge browsers.

The source code is very simple:

// Add a legend instance to the panel of a
// ListItem in a LayerList instance
const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function (event) {
    const item = event.item;
    item.panel = {
      content: "legend",
      open: true
    };
  }
});‍‍‍‍‍‍‍‍‍‍‍‍

Below is a running example:

https://codepen.io/anon/pen/RJzzep

Re: [JSAPI 4.8 vs 4.7]LayerList with Legend widget shows unwanted text

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:41:48 GMT

Qi,

There does not seem to be a good way to remove that text from 4.8 currently. I tried adding this css rule:

.esri-layer-list-panel__content.esri-layer-list-panel__content--legend:before,
.esri-layer-list-panel__content.esri-layer-list-panel__content--legend:after{
  content: "";
}‍‍‍‍‍‍‍‍

But it does not work until you collapse the legend and reopen it using the toggle button.

Because it is innerHTML text for a div that has other components as children under it you can not just use display: none;

Re: [JSAPI 4.8 vs 4.7]LayerList with Legend widget shows unwanted text

QiZhao — Fri, 28 Sep 2018 15:01:04 GMT

This issue has been fixed in latest v4.9 API. Thanks.

Re: [JSAPI 4.8 vs 4.7]LayerList with Legend widget shows unwanted text

KellyChan — Wed, 31 Oct 2018 23:30:18 GMT

The widget now gets below when a layer is switched on/off. A corresponding legend widget works fine.

Uncaught Error: div had a div child removed, but there is now more than one. You must add unique key properties to make them distinguishable.