[GIS] How to overlay unprojected image in openLayers 3

imageopenlayersopenlayers-2

I need to overlay an image that does not move with the map layers. I've considered using the ol.control.Control, as the doc specifically states they can be "informational only," as in my case. All the examples of the control are functional (rotate, etc.), but I need a simplified example that is just the image.

Update: here is what I'm playing with (only testing with DIV, will replace with image), but the DIV does not show as expected:

    var forecastLabel = function(opt_options) {
      var options = opt_options || {};

      var $button = $('<div>').css({
            'background': '#f00'
            ,'width': 100
            ,'height': 100
        })
        .text("BUTTON!");


      ol.control.Control.call(this, {
        element: $button[0],
        target: options.target
      });

    };
    ol.inherits(forecastLabel, ol.control.Control);

      var map = new ol.Map({
          controls: ol.control.defaults().extend([
            new forecastLabel(),
          ]),
   ...

Best Answer

Option 1

Just specify an attribution for any of your layers that you have added to the map, pointing the image file you want to overlay.

In your constructor for the layer:

'attribution': "<img src='myimage.jpg'/>"

You can then adjust where that is displayed by messing with the div.olControlAttribution CSS:

div.olControlAttribution 
{
    left:10em;
    top:10em;
}

Option 2

You can nest a div into your map div, if you give it a high enough z-index it will be visible above the map.

<div id="map" style="height:100%">
<div id="legend"></div>
</div>

and then the appropriate CSS.

#legend
{
    position:absolute; 
    right:10px; 
    bottom:10px; 
    z-index:10000; 
    width:100px; 
    height:100px; 
    background-image: url("YOUR_IMAGE.jpeg");
}
Related Question