leaflet - Adding a legend title

Gion Mors picture Gion Mors · Jan 23, 2014 · Viewed 11.6k times · Source

I am new to Leaflet and I am currently struggling with tutorials. So far I managed to create an interactive clorophet map, like in the example http://leafletjs.com/examples/choropleth.html.

I have a question: is it possible to add a title (simple text, not dynamic) to the legged located on the bottomright of the page? Could anyone tell me how, by just referring to the linked example?

Many thanks, G.

Answer

Gion Mors picture Gion Mors · Mar 21, 2014

You just need to add your title under "THE TITLE"...

var legend = L.control({position: 'topleft'});  
    legend.onAdd = function (map) {

    var div = L.DomUtil.create('div', 'info legend'),
        grades = [50, 100, 150, 200, 250, 300],
        labels = ['<strong> THE TITLE </strong>'],
        from, to;

    for (var i = 0; i < grades.length; i++) {
        from = grades [i];
        to = grades[i+1]-1;

    labels.push(
        '<i style="background:' + getColor(from + 1) + '"></i> ' +
        from + (to ? '&ndash;' + to : '+'));
        }
        div.innerHTML = labels.join('<br>');
        return div;


        };