Legenda personalizzata/immagine come legenda nella mappa del prospetto

Question

Ho costruito una mappa con icone personalizzate come indicatori. Puoi vedere il codice e il risultato nel mio jsfiddle qui: https://jsfiddle.net/marielouisejournocode/x24stb0m/

Ho provato a cambiare il codice della "normale" legenda per inserire l'immagine ma sono nuovo a js e al volantino e non riesco davvero a risolverlo.

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

legend.onAdd = function (map) { 

var div = L.DomUtil.create('div', 'info legend'), 
    grades = [1795, 1945, 1960, 1980, 2000], 
    labels = []; 

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); 

Quello che voglio fare ora è inserire una leggenda che spiega le icone come in questo esempio:

userei photoshop per creare, ma come per sovrapporre la mappa con un'immagine che non si comporta in modo strano quando la mappa viene diffusa ma si comporta come una normale leggenda nel volantino?

La ringrazio molto, Marie

Answer 1

Basta inserire le informazioni nella matrice come:

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"]; 

E

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

esempio:

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/