nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to customize legend using inside layerList in ArcGIS Api for JS version 4.30

MirzaMuhammadAhsanAli

Hello Everyone,

I am using ArcGIS Api for JS version 4.30.

I am using legend inside LayerList widget, I want to customize the icon and its position that open the legend for the layer, Is there any method to customize the layerlist and legend widget.
Here is my code
https://codepen.io/m-ahsan-ali/pen/ZEgoxPJ?editors=1000

Anybody, that can help me to customize the widgets, i want to move the icon that opens the legend from right end to left end, and change the icon to. Also attaching the Screenshot of current output.

Thank you!

Legend Layerlist.PNG

legend layerlist 2.PNG

Encontre mais publicações marcadas com

Accepted answers

MirzaMuhammadAhsanAli

@Sage_Wall , Thank you very much for your support, its fixed.

Sage_Wall

Not any officially supported way, however before we started using web components and added the visibilityAppearance property to allow for the checkboxes users were having success by adding some custom css rules.

https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/layerlist-widget-with-check-boxes/m-p/85090#M7683

All comments

MirzaMuhammadAhsanAli

@Sage_Wall , Thank you very much for your support, its fixed.

Sage_Wall

https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/layerlist-widget-with-check-boxes/m-p/85090#M7683

MirzaMuhammadAhsanAli

@Sage_Wall , Thank You!
There is another issue i am facing, I have to use API version 4.27, but

visibilityAppearance: "checkbox" is intoduced in verion 4.29 to show the checkbox instead of eyetoggle, Is there any method to use checkboxes in api version 4.27 for selecting layers in layerlist.

Thank you!

Sage_Wall

Great to hear you got the icon,

I'm sorry, I don't know of any supported way to move only the action that opens the content over to the other side. Setting the rtl on the body switches a lot more than just the actions position. If I think of something or find out otherwise I'll be sure to update.

MirzaMuhammadAhsanAli

@Sage_Wall , I have changed the icon for the Legend toggler, Can you help me in changing the position of the toggler?

Thank you!

MirzaMuhammadAhsanAli

Thank you Sage_Wali for your response.

Can you please tell me can I use arrow icon for the legend toggler and for the position of this icon i want to change the position of this icon only like just before the check box.

Again thank you for help.

Sage_Wall

Hi @MirzaMuhammadAhsanAli ,

Since we have redesigned the layer list to use calcite components you will run into issues trying to modify things with CSS like the codepen is trying to do. This is because the components are encapsulated within shadow dom.

You can create a new Legend for the list item panel content without using the "legend" string and set any of the properties on the Legend you would like. In this case I set the icon to be the information icon. I modified your original codepen. https://codepen.io/sagewall/pen/vYojjJE

                  listItemCreatedFunction: (event) => {
                    const item = event.item;
                    if (item.layer.type != "group") {
                        item.panel = {
                            content: new Legend({
                              icon: "information",
                              view
                            }),
                            open: false,
                        };
                    }
                }

You can also set the dir attribute on the body or a containing html element to switch the text direction. This will move the actions over to the left hand side of the layer list.

<body dir="rtl">

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.