I'm trying to make my legend horizontal em leaftlet by I'm not sure what I have to change. My base legend is based on this tutorial. Ultimately what I would like to have is something like this. Any ideas? Is it just a matter of change the css?



you have to change the css, but also the javascript that is used to generate the html for the legend.

From the section of the tutorial where the legend is generated ("Creating a control with a legend..."), change the part with the comment "loop through our density intervals...", to something like the following

var legend = L.control({position: 'bottomright'});
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
    // first loop for colored legend boxes
    for (var i = 0; i < grades.length; i++) {
        div.innerHTML +=
            '<span style="background:' + getColor(grades[i] + 1) + '"></span> ';

    // a line break
    div.innerHTML += '<br>';

    // second loop for text
    for (var i = 0; i < grades.length; i++) {
        div.innerHTML +=
            '<label>' + grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] : '+') + '</label>';
    return div;


Then change the css to:

.legend span, .legend label {
  display: block;
  width: 50px;
  height: 18px;
  float: left;
  opacity: 0.7;
  text-align: center;
  font-size: 80%

Change the width, height and font-size as needed

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.