[GIS] Custom Leaflet Legend

javascriptleafletweb-mapping

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',
        }
    }
    }

Best Answer

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.

Related Question