0

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:

enter image description here

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.

  • Are you looking for a "all-in-push-button" solution or some code samples? If you are looking for a coding solution, you could build your TOC with your icons using html and js. I have some code sample for that. – juminet Sep 7 '17 at 7:55
  • Maybe is not well explained in the question, I will update it ASAP. I'm looking for options or ideas of how other people are handling this. Your samples will be well received. – Francisco Puga Sep 7 '17 at 8:58
  • To clarify: are you asking about how to generate the symbol icon image files, or how to generate the JS for the TOC? – Tom Chadwin Sep 8 '17 at 8:24
  • Sorry for the late answer. @TomChadwin I edit the question and add a "To clarify" section that I hope makes clear my expectations. – Francisco Puga Sep 12 '17 at 12:01
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>");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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