Пользовательская легенда/изображение как легенда на карте листовки

Question

Я построил карту с пользовательскими значками в качестве маркеров. Вы можете увидеть код и результат в моем jsfiddle здесь: https://jsfiddle.net/marielouisejournocode/x24stb0m/

Я попытался изменить «нормальный» код условных обозначений, чтобы поместить изображение туда, но я новичок в js и листочке и не могу это обработать.

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

То, что я хочу сделать сейчас, это вставить легенду, которая объясняет иконки, как в этом примере:

Я бы использовать Photoshop, чтобы создать его, но как наложения на карту с изображением что не ведет себя странно, когда карта распространяется, но ведет себя как нормальная легенда в листовке?

Большое спасибо, Мари

Answer 1

Вам просто нужно вставить данные в массиве как:

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

И

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

Например:

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/