Construí un mapa con iconos personalizados como marcadores. Puedes ver el código y el resultado en mi jsfiddle aquí:https://jsfiddle.net/marielouisejournocode/x24stb0m/

Traté de cambiar el código de leyenda "normal" para poner la imagen allí, pero soy nuevo en js y folleto y realmente no puedo resolver esto.

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

Lo que quiero hacer ahora es insertar una leyenda que explique los íconos como en este ejemplo:

Usaría Photoshop para crearlo, pero ¿cómo superponer el mapa con una imagen que no se comporta de manera extraña cuando el mapa se extiende, pero se comporta como una leyenda normal en el folleto?

Muchas gracias marie