Search code examples
javascriptleaflet

Custom legend / image as legend in leaflet map

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: enter image description here

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

Solution

  • 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/