ui_layers_legends_graduated.mjs
/**
### /ui/layers/legends/graduated
The graduated theme legend module exports the graduatedTheme to the `ui.layers.legend{}` library object.
@requires /ui/elements/legendIcon
@module /ui/layers/legends/graduated
*/
/**
@function graduatedTheme
@description
The graduatedTheme method creates a `catElements[]` array with icons for each graduated theme category. The elements array is passed into a legend element assigned as `layer.style.legend` and returned from the method.
@param {layer} layer The decorated mapp layer.
@returns {HTMLElement} The graduated theme legend element.
*/
export default function graduatedTheme(layer) {
const theme = layer.style.theme
theme.legend ??= {}
const catElements = theme.categories
.filter(cat => cat.value !== undefined)
.map(cat => {
const catClass = `contents ${theme.legend?.horizontal ? 'horizontal' : ''}`
const catIcon = mapp.ui.elements.legendIcon({
width: 24,
height: 24,
...cat.style
})
cat.label ??= cat.value
return mapp.utils.html`<div
data-id=${cat.value}
class=${catClass}>
<div style="height: 24px; width: 24px; grid-column: 1;">
${catIcon}
</div>
<div class="label" style="grid-column: 2;">
${cat.label}
</div>`
})
const classList = `contents-wrapper ${theme.legend?.layout || 'grid'} ${theme.legend?.nowrap ? 'nowrap' : ''}`
theme.legend.node = mapp.utils.html.node`
<div class="legend">
<div class=${classList}>
${catElements}
</div>`
layer.style.legend ??= theme.legend.node
if (layer.style.legend) {
layer.style.legend.replaceChildren(...theme.legend.node.children)
}
return theme.legend.node;
}