Blank space in the qgis2web legend

Question

I’ve been trying to customize the legend obtained by qgis2web but I still get blank spaces between the groups that I formed. I am not sure if I have to change the script of index.html or layers.js. I’ve tried adding in different places of the format layers
and also

but I keep obtaining the same result with the blank space. I have exported my web map in open layers from the latest version of qgis2web.

Here are examples of how I currently get the legends

I also want to reorder the layers. I want for example that the groups RSU and AYSA are listed first and the two centroids layers to be at the end of the list.

Answer 1

You haven't written whether your export is openlayers or leaflet and you haven't entered the code for your new layers list, so it's hard to say why this happens if you don't show it.

In any case I can tell you that I will be releasing an update soon that will allow exporting layer groups for openlayers export

In the meantime I'll explain what you can do with the openlayers export:

In layers.js file of the “layers” folder the plugin exports and configures each layer present in QGIS project. Once this configuration is finished there is the definition of the layersList variable

This variable is recalled from the map therefore defining it in a personalized way is essential for grouping the layers.

Do not manually edit the layers.js file, but define the variable again in your html file

The group structure must have the reverse ordering of what you want to show in the layerswitcher

Example:

    <script>
    var layersList = [
    new ol.layer.Group({
                title: 'Basemap',
                layers: [
    lyr_GoogleLabels_0,lyr_GoogleTerrain_1,lyr_GoogleSatellite_2,lyr_OpenStreetMap_3,lyr_SfondoBianco_4,
    ]}),
    new ol.layer.Group({
                title: 'WMS Catasto',
                fold: 'close',
                layers: [
    lyr_WMSCatastoFogli_5,lyr_WMSCatastoStrade_6,lyr_WMSCatastoAcque_7,lyr_WMSCatastoParticellezoom200m_8,lyr_WMSCatastoFabbricatizoom200m_9,lyr_WMSCatastoVestizionizoom100m_10,
    ]}),
    new ol.layer.Group({
                title: 'Vincoli e Tutele',
                fold: 'open',
                layers: [
    lyr_PaiEsondazioniagg2016_11,lyr_PaiFraneagg2016_12,lyr_ParchieRiserve_14,lyr_VincoloIdrogeologico_15,lyr_VincoliArcheologiciArt142m_17,lyr_GalassiniDM310785_18,lyr_BellezzeNaturaliArt136_19,lyr_ZPS_20,lyr_SIC_21,
    ]}),
    new ol.layer.Group({
                title: 'Cartografia generale',
                fold: 'open',
                layers: [
    lyr_ToponimiMonti_13,lyr_ReticoloIdrografico_16,lyr_ConfiniComunali_22,lyr_ConfiniProvinciali_23
    ]}),
    ];
    </script>

PS: the layerswitcher you see in the image above is not the default one so don't take it as an example.