javascript - Custom Leaflet Legend

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 +=
        ' ' +
        grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+');
}


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

Answer

A vertical table would be like:

    
        
3000 to 3017
    
    
        
2500 to 3000
    
    

You could build it with a loop like:

div.innerHTML += '';

for (var i = 0; i < grades.length; i++) {

    div.innerHTML +=
        '';
}

div.innerHTML += '
' +
        grades[i] + (grades[i + 1] ? '–' + grades[i + 1] : '+') +
        '
';

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

    
        
 
        
3000 to 3017
    
    
        
 
        
2500 to 3000
    
    

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

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

    
        
0 to 500
        
500 to 1000
            

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.