Ovelay Legend on Map

by Edsel Matt Morales

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js&quot;"></script>
<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; 
}

JavaScript

var map, layer;
        function init(){
            map = new OpenLayers.Map('map');
            layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
            map.addLayer(layer);
            map.setCenter(
                new OpenLayers.LonLat(-71.147, 42.472).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), 12
            );    
        };
init();