Я построил карту с пользовательскими значками в качестве маркеров. Вы можете увидеть код и результат в моем 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, чтобы создать его, но как наложить карту на изображение, которое не выглядит странно, когда карта растягивается, но ведет себя как обычная легенда в листовке?

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