0

Trying to create 9 separate leaflet legend variables for the 9 different overlays (graduated colour chloropleths) I have on a leaflet map. Each overlay will have 6 classifications of colour dependant on the attribute being visualised by the bounds of colour differ between them - for instance on 1 overlay a feature might have a value of 100 and will be complete black whereas on another overlay a value of 100 might be light grey. Once I know the structure for creating 1 legend I can then replicate it appropriate for the other overlays.

The legends I have seen so far all make use of a getcolors() function that is also used in the styling of the layer. I just want to form the table of the legend so i can plugin all of the necessary colours and bounds.

legend.onAdd = function (map) {

var div = L.DomUtil.create('div', 'info legend'),
    grades = [0, 10, 20, 50, 100, 200, 500, 1000],
    labels = [];

// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
    div.innerHTML +=
        '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
        grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
}

return div;
};

legend.addTo(map);

Instead of the method above, how would I create a table with 6 colour boxes and 6 corresponding labels?

The layers are being style with their own style function that is called on when they're added:

        function doStyleGrandtotal(feature) {
    if (feature.properties.grandtotal >= 0.0 &&
            feature.properties.grandtotal <= 500.0) {

        return {
            color: '#000000',
            weight: '1.04',
            dashArray: '',
            fillColor: '#2b83ba',
            opacity: '0.6',
            fillOpacity: '0.6',
        }
    }
    if (feature.properties.grandtotal >= 500.0 &&
            feature.properties.grandtotal <= 1000.0) {

        return {
            color: '#000000',
            weight: '1.04',
            dashArray: '',
            fillColor: '#80bfab',
            opacity: '0.6',
            fillOpacity: '0.6',
        }
    }
    if (feature.properties.grandtotal >= 1000.0 &&
            feature.properties.grandtotal <= 1500.0) {

        return {
            color: '#000000',
            weight: '1.04',
            dashArray: '',
            fillColor: '#c7e8ad',
            opacity: '0.6',
            fillOpacity: '0.6',
        }
    }
    if (feature.properties.grandtotal >= 1500.0 &&
            feature.properties.grandtotal <= 2000.0) {

        return {
            color: '#000000',
            weight: '1.04',
            dashArray: '',
            fillColor: '#ffffbf',
            opacity: '0.6',
            fillOpacity: '0.6',
        }
    }
    if (feature.properties.grandtotal >= 2000.0 &&
            feature.properties.grandtotal <= 2500.0) {

        return {
            color: '#000000',
            weight: '1.04',
            dashArray: '',
            fillColor: '#fdc980',
            opacity: '0.6',
            fillOpacity: '0.6',
        }
    }
    if (feature.properties.grandtotal >= 2500.0 &&
            feature.properties.grandtotal <= 3000.0) {

        return {
            color: '#000000',
            weight: '1.04',
            dashArray: '',
            fillColor: '#f07c4a',
            opacity: '0.6',
            fillOpacity: '0.6',
        }
    }
    if (feature.properties.grandtotal >= 3000.0 &&
            feature.properties.grandtotal <= 3017.0) {

        return {
            color: '#000000',
            weight: '1.04',
            dashArray: '',
            fillColor: '#d7191c',
            opacity: '0.6',
            fillOpacity: '0.6',
        }
    }
    }
  • 1
    How are your overlays being coloured? Is there any mean to retrieve the used colours, even if it means looping through all features? – ghybs Jan 8 '16 at 13:46
  • Posted style function in questions main text. Should just be a case of formatting the table with the coloured squares and then It should be possible to just copy in the values of the different bounds. The colours don't change between the overlays, just the bounds. – Jamie2483 Jan 8 '16 at 13:48
  • 1
    If I understand correctly, you make 1 different styling function per overlay. Each function reads a unique property value and outputs a pre-defined colour (but with different thresholds and possibly different colours per overlay). Then your question is how to build a legend automatically from this situation, without having to manually copy-paste the colours (and possibly the thresholds)? – ghybs Jan 8 '16 at 14:01
  • More simple than that - just need to know the formatting for creating the table in the legend with boxes that i can colour manually on one side and numbers on the right hand side. Don't need to automate anything. – Jamie2483 Jan 8 '16 at 14:08
  • 1
    oh ok, thanks for the clarification! So in fact you need a sort of HTML template? – ghybs Jan 8 '16 at 14:11
1

A vertical table would be like:

<table>
    <tr>
        <td style="background-color: #d7191c;">3000 to 3017</td>
    </tr>
    <tr>
        <td style="background-color: #f07c4a;">2500 to 3000</td>
    </tr>
    <!-- etc -->
</table>

You could build it with a loop like:

div.innerHTML += '<table>';

for (var i = 0; i < grades.length; i++) {
    div.innerHTML +=
        '<tr><td style="background-color: '
        + getColor(grades[i] + 1) + ';">' +
        grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] : '+') +
        '</td></tr>';
}

div.innerHTML += '</table>';

With 2 columns (1 for colour, 1 for numbers):

<table>
    <tr>
        <td style="background-color: #d7191c; width: 50px;">&nbsp;</td>
        <td>3000 to 3017</td>
    </tr>
    <tr>
        <td style="background-color: #f07c4a;">&nbsp;</td>
        <td>2500 to 3000</td>
    </tr>
    <!-- etc -->
</table>

Demo: https://jsfiddle.net/nwbe3k9g/

A horizontal table would be even easier, it would be like:

<table>
    <tr>
        <td style="background-color: #2b83ba;">0 to 500</td>
        <td style="background-color: #80bfab;">500 to 1000</td>
        <!-- etc -->
    </tr>
</table>

Then you can add general styling to your tables by using CSS classes. You should have a look at resources on CSS or look for help on Stack Overflow for that.

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.