title: Custom legend / image as legend in leaflet map
body: <p>I built a map with custom icons as markers. You can see the code and the result in my jsfiddle here: <a href="https://jsfiddle.net/marielouisejournocode/x24stb0m/" rel="noreferrer">https://jsfiddle.net/marielouisejournocode/x24stb0m/</a></p>
  
  <p>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.</p>
  
  <pre><code>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 &lt; grades.length; i++) {
      div.innerHTML +=
          '&lt;i style="background:' + getColor(grades[i] + 1) + '"&gt;&lt;/i&gt; ' +
          grades[i] + (grades[i + 1] ? '&amp;ndash;' + grades[i + 1] + '&lt;br&gt;' : '+');
   }
  
   return div;
   };
  
   legend.addTo(map);
  </code></pre>
  
  <p>What I want to do now is insert a legend that explains the icons like in this example:
  <a href="https://i.stack.imgur.com/6w3Jn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6w3Jn.png" alt="enter image description here"></a></p>
  
  <p>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?</p>
  
  <p>Thank you very much,
  Marie</p>