Support for a html formatted output?

[rowanwins]

Hi @w8r ,

Just wondering if there is value in providing a formatted html output? I think users would pretty quickly get tired of having to write

        var html = '<ul>';
        for(var i = 0, len = legend.layers.length; i < len; i++) {
            html += '<li><strong>' + legend.layers[i].layerName + '</strong><ul>';
            for(var j = 0, jj = legend.layers[i].legend.length; j < jj; j++){
                html += L.Util.template('<li><img width="{width}" height="{height}" src="data:{contentType};base64,{imageData}"><span>{label}</span></li>', legend.layers[i].legend[j]);
            }
            html += '</ul></li>';
        }
        html+='</ul>';

Perhaps we can offer a raw json output and default html output?

[w8r]

@rowanwins I was thinking about doing it exactly the way @patrickarlt suggested - creating a simple control for legend rendering, but making it configurable enough for it to be possible to render in some specific container and using a custom template for it.

As for a template I would go for something dead simple, like the code I provided for the example, only make use of template strings for wrappers and rows.

[w8r]

so something like

EsriLeaflet.Controls.Legend = L.Control.extend({
    options: {
        container: div, // optional
        rowTemplate: '<li class="legend-row"><img class="legend-icon" width="{width}" height="{height}" src="data:{contentType};base64,{imageData}"><span class="legend-label">{label}</span></li>',
        layerTitleTemplate: '<span class="legend-layer-title">' + legend.layers[i].layerName + '</span>',
        position: 'topright'
    },

    initialize: function(layers, options) { ... }
});