topic Re: Change title text on arcgis-layer-list component in ArcGIS JavaScript Maps SDK Questions

Change title text on arcgis-layer-list component

PeterK — Fri, 09 May 2025 17:41:03 GMT

I'm trying to change the top level text on the arcgis-layer-list component from 'Layer List' to 'Anything else' and can't figure out how to do it.

I don't see any properties other than 'label' which don't do it. I've tried using Jquery to find the header tag elements and also tried searching for "heading" class and I can't seem to get to it. I'm new to the calcite framework so I'm wondering what I'm missing.

Re: Change title text on arcgis-layer-list component

Sage_Wall — Mon, 12 May 2025 15:10:31 GMT

Hi @PeterK , this isn't currently possible, but I can see that it would be better if it were. We'll take this under consideration and possibly add a property to set the header text in the future.

Re: Change title text on arcgis-layer-list component

PeterK — Mon, 12 May 2025 15:40:35 GMT

Thanks for the clarification, being new to web components I wasn't sure if I was missing some way to access the text.

Re: Change title text on arcgis-layer-list component

PeterK — Tue, 20 May 2025 14:55:45 GMT

I was able to change the title text on the Layer List using the following method. I'm not sure if this is the way to interact with web components but it seems to work.

Markup:

<arcgis-map basemap="arcgis/topographic" center="-111, 33" zoom="13" >
<arcgis-layer-list position="top-right" show-collapse-button show-heading visibility-appearance="checkbox" icon="legend-plus"></arcgis-layer-list>
</arcgis-map>

In require block:

setTimeout(function () {
const theLayerListHeader = document.querySelectorAll("calcite-flow-item")[0].shadowRoot.querySelectorAll('calcite-panel')[0].shadowRoot.querySelector('h2');
theLayerListHeader.innerText = 'Legend'
theLayerListHeader.style.fontSize = '17px';
}, 1000)

I tried using the argisReady event and onComponentReady promise methods but the layer list was not fully loaded as far as I could tell, so I fell back to a setTimeout block. Many of the arcgisReady and onComponent methods don't seem to have a fully ready component, bit I may be missing something.

Re: Change title text on arcgis-layer-list component

Sage_Wall — Tue, 20 May 2025 16:03:23 GMT

`arcgisReady` and `componentOnReady()` should fire off when all the publicly documented stuff is ready but we're venturing into the undocumented here 🙂. I'm glad you figured something out though.

Just thinking about this a little more another option would be to wrap your `arcgis-layer-list` in a `calcite-block` or `calcite-panel`. Then if you turn off the header in the layer list you could add whatever you wanted as the heading in the calcite component.

https://codepen.io/sagewall/pen/zxxVdam

Re: Change title text on arcgis-layer-list component

PeterK — Tue, 20 May 2025 16:27:38 GMT

That works too, thanks for the alternate solution!