Leaflet Legende wird nicht angezeigt

Question

Kann jemand sagen, was mit dem Code nicht stimmt? Die Legende, die der einfachste Teil sein sollte, um nicht aufzutauchen, und ich kann nicht herausfinden warum. Vielleicht in einer anderen Ebene versteckt?

der getColor und Legende Code Nach

var legend = L.control({ 
    position: 'bottomleft' 
}); 

legend.onAdd = function(map) { 
    var div = L.DomUtil.create('div', 'info legend'), 
    grades = [0.2, 0.26, 0.32, 0.38, 0.44, 0.5, 0.56, 0.62, 0.68, 0.74, 0.8, 0.86, 0.92, 0.98, 1.04, 1.1], 
    labels = [], 
    from, to; 

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

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

    div.innerHTML = labels.join('<br>'); 
    return div; 
}; 

Answer 1

EDIT folgende Antwort Kommentare:

Verwenden Sie die Entwicklertools (F12/Mac: Cmd + Alt + I) mögliche Konsole Fehler zu lesen.

In Ihrem Fall ist die getColor Funktion nicht im Bereich Ihrer legend.onAdd definiert.

Außerdem fügen Sie 1 zu Ihrem from Wert, was zu Werten im Bereich in [1,2-2,1] während Ihrer getColor Funktionswert von 0,26 bis 1,1 verwendet.

Arbeiten Demo aus dem Repo mit Code: http://plnkr.co/edit/lbKlXaV76t6NclHQPCtr?p=preview (getColor in der richtigen Umfang kopiert und entfernt die +1 in getColor(from + 1))

---

Ursprüngliche Antwort:

Haben Sie das benutzerdefinierte Steuerelement zur Karte hinzufügen ?

legend.addTo(map); 

Als Randbemerkung, Ihr <i> Tag mit Legende-ed Hintergrundfarbe von getColor hat keinen Inhalt. Daher würden Sie wahrscheinlich keinen farbigen Inhalt sehen ...

Demo: http://jsfiddle.net/3v7hd2vx/34/ (mit Dummy-Inhalte in Ihrem <i>-Tag)