topic Re: How to customize legend using inside layerList in ArcGIS Api for JS version 4.30 in ArcGIS JavaScript Maps SDK Questions

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

MirzaMuhammadAhsanAli — Thu, 31 Oct 2024 11:33:19 GMT

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!

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

Sage_Wall — Thu, 31 Oct 2024 12:25:43 GMT

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.

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

MirzaMuhammadAhsanAli — Thu, 31 Oct 2024 12:25:55 GMT

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.

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

MirzaMuhammadAhsanAli — Thu, 31 Oct 2024 12:36:40 GMT

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

Thank you!

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

Sage_Wall — Thu, 31 Oct 2024 13:00:38 GMT

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.

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

MirzaMuhammadAhsanAli — Thu, 31 Oct 2024 13:10:25 GMT

@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!

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

Sage_Wall — Thu, 31 Oct 2024 13:22:40 GMT

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

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

MirzaMuhammadAhsanAli — Fri, 01 Nov 2024 04:55:46 GMT

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