Custom legend / image as legend in leaflet map

Question

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 "normal" legend code to put the picture there but I am new to js and leaflet and can't really work this out.

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

What I want to do now is insert a legend that explains the icons like in this example:

I'd use photoshop to create it, but how to overlay the map with an image that doesn't behave strangely when the map is spreaded but does behave like a normal legend in leaflet?

Thank you very much, Marie

This is just perfect! If you want an upvote just post your Code as an answer, I would love to give you one for your help :) — Marie-Louise
And make groups for the markes, maybe you want put some event...leafletjs.com/examples/layers-control.html — HudsonPH

HudsonPH HudsonPH · Accepted Answer · 2016-06-08T13:31:47

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/

Custom legend / image as legend in leaflet map

1 Answers