Overlaying Legend on Map

This is actually just a simple CSS manipulation, you need to create your legend using an image editor. This won't generate automatically based on your styling.

Demo

<!--HTML-->
<div id="map">
  <div id="infoi">
    <img src="https://b3218a0dcf0f0481f4a486b8229300982d8fe048-www.googledrive.com/host/0B0JBx-GczUoYUExkeENEQWFDb00"/>
  </div>
</div>
/*CSS*/
#map {
  width: 500px;
  height: 500px;
  position: relative;
    background: #343434
}
#infoi {
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 35px;
  left: 10px;
}
#infoi {
  z-index:10000; 
}