I am trying to relocate a layerList added to an expand widget to a Calcite action bar, but I think that I'm going about it wrong. I am iterating my loaded layerList and building a calcite radio button group that is then added to the action bar. Is this the correct approach? Seems like there's a faster way.
Here's a code excerpt of my layerList.
var layerListExpand = new Expand({
content: (layerList = new LayerList({
view: view,
listItemCreatedFunction: function listItemCreatedFunction(event) {
var item = event.item;
var key = item.title.toUpperCase().replace(/ /g, '');
if (item.layer.type === 'group' || item.layer.type === 'tile') {
if (key === 'AERIALS') {
watchUtils.whenFalse(item.layer, 'visible', function (newVal) {
layerListFormat(item);
});
watchUtils.whenTrue(item, 'visible', function (newVal) {
layerListFormat(item);
});
}
}
},
})),
view: view,
autoCollapse: true,
expanded: false,
expandTooltip: 'Map Layers',
group: 'top-right',
mode: 'floating',
});
Build radio button group from loaded layerList
item.layer.layers.forEach(function (item) {
if (item.type === 'imagery-tile') {
let block = document.createElement('calcite-block');
block.setAttribute('heading', item.title);
block.setAttribute('collapsible', '');
let notice = document.createElement('calcite-notice');
notice.setAttribute('active', '');
let div = document.createElement('div');
div.setAttribute('slot', 'message');
let rbg = document.createElement('calcite-radio-button-group');
rbg.setAttribute('name', 'basic-group');
rbg.setAttribute('layout', 'vertical');
let label = document.createElement('calcite-label');
rbg.setAttribute('layout', 'inline');
rbg.innerHTML = item.title;
let rb = document.createElement('calcite-radio-button');
label.appendChild(rb);
rbg.appendChild(label);
document.querySelector(`[data-panel-id=layers-container]`).appendChild(rbg);
}
});