In Symbol layers show the actual symbol used on the map

[apanagio]

Is your feature request related to a problem? Please describe. It is hard to distinguish symbol layers on the legend, since they have the same symbol. The more such layers you have, the harder it is . So I propose to read the symbol from the style specification and render it on the legend.

Describe the solution you'd like The icon should be red from the style specification and rendered on the legend. The easiest way to do it is render it on a small canvas. Sample code to accomplish that for icon-images

function get_legend_symbol(map, layer_id) {
/**
 * Returns an HTML element (canvas) with the symbol taken from the layer style
 * @param {Object} map - The map object 
 * @param {String} layer_id: Id of the layer 
 */
    const style = map.getStyle().layers.find(l => l.id == layer_id)

    const canvas = document.createElement('canvas')
    const [width, height] = [64, 64]
    canvas.id = `${layer_id}_canvas`
    canvas.height = width
    canvas.width = height
    canvas.classList.add('legend-item')
    const img = map.getImage(style.layout["icon-image"])
    const UAC = new Uint8ClampedArray(img.data.data, width, height)
    const DAT = new ImageData(UAC, width, height);
    const ctx = canvas.getContext("2d")
    ctx.putImageData(DAT, 0, 0)

    return canvas
}

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.