How to create TOC icons from a geojson leaflet style

Question

I have a leaflet map that shows a couple of geojson layers. The style for each layer is represented in a TOC by means of the plugin Grouped Layer Control. The TOC has the following aspect:

The question is if there are tools to generate the icons of the layers for the TOC more or less automatically from leaflet styles like these ones:

function styleMessalo_T100(feature) {
    return {
        weight: 0.52,
        color: '#000000',
        fillColor: '#3da06d',
        opacity: 0,
        fillOpacity: 0.3
    };
};

function styleEstradas(feature) {
    var highway = feature.properties.tags.highway;
    if ( highway && ((highway === 'primary') || (highway === secondary'))) {
        return {
            weight: 0.6,
            color: '#9c0000',
            opacity: 1
        }
    } else {
        return {
            weight: 0.6,
            color: '#6d7672',
            opacity: 1
        }
    }
};

var iconBarragem = L.icon({
    iconUrl: '../markers/barragem.jpg',
    iconSize: [20.0, 20.0],
});

function doPointToLayerBarragem4(feature, latlng) {
    return L.marker(latlng, return {
        icon: iconBarragem,
    });
}

Now, I'm creating similar styles manually in qgis, and using qgis2web plugin to generate a webmap. Then I take the png files from the legend folder, rename it, and paste it into my own project.

To clarify. I'm aware that I can create a more or less pure html+css legend pretty similar to the desired styles, coding it by hand as exposed in this or this or this answers.

But I'm looking for a gui tool or script (preferable for automatizing the process) that given a leaflet style or something like mapbox-simplestyle generates an image file or html+css code that represents the legend.

I also see a suggestion to use geoserver but this seems overkilling.

Answer 1

You can build your own table of content programmatically in javascript. The idea is to loop over the layers and/or the layer features of your map and to add a corresponding item in a html div (#toc).

1) Suppose you have a polygon or line layer styled as in your example, you can add a legend item to your table of content using something like this (with jQuery.append):

var style = styleEstradas(feature); 

$('#toc').append("<div class='colored_box' style='background-color:" + style.color + "';></div>");

and the CSS:

.colored_box {
   position: relative;
   margin-left: auto;
   margin-right: auto;
   width:1em;
   border-radius: 5px;
   height: 0.85em;
   margin-top: 0.35em;
   opacity: 0.5;
}

This is inspired from this project. Basically, you create a element with a bckground color representing your layer. For styling line, you can adjust the css as something like:

{
   height:0.15em;  
   margin-top: 0.65em;
}

2) Suppose you have a layer with icons with the following style:

var imgFile = 'my_icon.png'    
var myIcon = L.icon({
        iconUrl: imgFile,
        iconSize: ...,
        iconAnchor: ...,
    });

It is even simpler, you can simply add the icon to your html DOM. Add it to a div "#toc" using something like this (still with jquery):

$("#toc").append("<div class='icon'><img src='" + imgFile + "'></div>");