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?
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] ? "–" + 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: