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

398
3
Jump to solution
07-06-2018 12:54 PM
Highlighted
by
New Contributor III

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.

Unwanted texts

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.

Texts disappeared after clicked toggle button

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

Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
by
New Contributor III

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

View solution in original post

Reply
0 Kudos
3 Replies
Highlighted
MVP Esteemed Contributor

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;

Highlighted
by
New Contributor III

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

View solution in original post

Reply
0 Kudos
Highlighted
New Contributor

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.

Reply
0 Kudos