Custom Legend / Image As Legend In Leaflet Map

I built a map with custom icons as markers. You can see the code and the result in my jsfiddle here: https://jsfiddle.net/marielouisejournocode/x24stb0m/ I tried to change the 'nor

Solution 1:

You just need insert the info in the array like:

 grades = ["Car", "ball"],
 labels = ["http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png","http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png"];

And

 grades[i] + (" <img src="+ labels[i] +" height='50' width='50'>") +'<br>';

example:

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

legend.onAdd = function (map) {

    var div = L.DomUtil.create('div', 'info legend'),
        grades = ["Car", "ball"],
        labels = ["http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png","http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png"];

    // 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 +=
            grades[i] + (" <img src="+ labels[i] +" height='50' width='50'>") +'<br>';
    }

    return div;
};

legend.addTo(map);

https://jsfiddle.net/x24stb0m/24/