Custom legend / image as legend on map flyer

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 changing the “normal” legend code to put the image there, but I am new to js and the flyer and can't really fix it.

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

Now I want to add a legend that explains the icons, as in this example:

I would use Photoshop to create it, but how do I overlay a map on an image that doesn't behave strangely when distributing the map, but behaves like a regular leaflet legend?

Thanks a lot Marie

Answer 1

You just need to insert the information into the array, for example:

  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/