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; } } }

Change title text on arcgis-layer-list component

PeterK

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.

Vind meer berichten getagd met

Accepted answers

Sage_Wall

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.

All comments

PeterK

That works too, thanks for the alternate solution!

Sage_Wall

`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

PeterK

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.

PeterK

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

Sage_Wall

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.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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