Select to view content in your preferred language

LayerList control positioning of "panel" action vs. "actionsSections" actions

36
0
6 hours ago
fdeters
Regular Contributor

I'm looking for a way to control the positioning of `LayerListItem` actions when defining them using a `listItemCreatedFunction`. I haven't yet found a way to make the "panel" action render to the right side of the "actionsSections" actions. 

See the example below. I want the "panel" action to render on the rightmost side of the list item, and the "actionsSections" action to render to the left of that. Is there a way to control the order?

function myListItemCreatedFunction(event) {
  const { item } = event;
  await item.layer.when();

  // it doesn't seem to matter which order these are defined in
  item.actionsSections = [
    [
      {
        title: 'Toggle labels',
        icon: 'label',
        id: 'toggle-labels',
       },
    ],
  ],
  item.panel = {
    content: htmlContent, // some custom content I define elsewhere
    icon: 'handle-vertical',
    title: 'Layer settings',
  },
}

 

In my case, this matters because every layer in the layer list has a `panel` action defined, but not every layer has an `actionsSections` action defined. I end up getting a misaligned set of actions, like this:

fdeters_0-1746830659929.png

 

0 Kudos
0 Replies