0

I would like to add a header to the legend when exporting a qgis project to a web map using the qgis2web plugin. The text above the list of available layers. How can I do it?

enter image description here

1 Answer 1

1

One-time change :

After the export you need to edit the index.html file contained in the export folder

Before closing the </head> section you must insert this <style>, which you can customize to your liking (For example if the title is long it will go on two lines and therefore it will have to increase the margin-top of the .layer-switcher ul element so that it does not overlap)

    <style>
        .layerswitcher-title {
        position: absolute;
        top: 10px;
        left: 10px;
        height: 15px;
        font-weight: bold;
        display:none;
        }
        .layer-switcher.shown .layerswitcher-title {
        display:block!important;
        }
        .layer-switcher ul {
        margin-top: 30px;
        }
    </style>

You will also need to add this script before closing the </body> section, personalize it with your title

    <script>
        // Select "layer-switcher" element
        var layerSwitcher = document.querySelector('.layer-switcher');
    
        // Create <a> element
        var linkItem = document.createElement('a');
        linkItem.textContent = 'Layerswitcher Title Example';
    
        // Add class
        linkItem.classList.add('layerswitcher-title');
    
        // Add <a> element like first child
        layerSwitcher.insertBefore(linkItem, layerSwitcher.firstChild);
    </script>

Always edit :

If you want to set a default title without having to edit the index.html file every time after exporting, you will need to edit the full-screen.html or canvas-size.html file (depending on your export type) contained in this path C:\Users\User\AppData\Roaming\QGIS\QGIS3\profiles\default\python\plugins\qgis2web\templates

But be careful !!! with each update of qgis2web these files will be overwritten.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.