Leaflet Legend – Adding ‘No Data’ Square to Legend in Leaflet

leafletlegend

I want to add a square above the red one in my legend that is Grey and says "No Data".

How do I do this?

legend

var grades = [0, 25, 50, 75];

function getColor(d) {
 return d >= 75
 ? "#2c7bb6"
 : d >= 50
 ? "#abd9e9"
 : d >= 25
 ? "#fdae61"
 : d > 0
 ? "#d7191c"
 : "#d3d3d3";
}

     var legend = L.control({ position: "bottomright" });

  legend.onAdd = function (map) {
    var div = L.DomUtil.create("div", "legend"),
      grades = [0, 25, 50, 75],
      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);

Best Answer

Should be able to add this:

div.innerHTML = '<i style="background:#cecece"></i> No data<br>';

So the full thing becomes:

var grades = [0, 25, 50, 75];

function getColor(d) {
 return d >= 75
 ? "#2c7bb6"
 : d >= 50
 ? "#abd9e9"
 : d >= 25
 ? "#fdae61"
 : d > 0
 ? "#d7191c"
 : "#d3d3d3";
}

  var legend = L.control({ position: "bottomright" });

  legend.onAdd = function (map) {
    var div = L.DomUtil.create("div", "legend"),
      grades = [0, 25, 50, 75],
      labels = [];


    div.innerHTML = '<i style="background:#cecece"></i> No data<br>';

    // 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);
Related Question