1

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(),
          ]),
   ...
4
  • Are you trying to overlay this at a specific spot on the map, or just as part of the UI?
    – Thomas
    Oct 13 '15 at 17:21
  • Trying to position it in the lower-right corner, but not picky at this point. :) Oct 13 '15 at 17:51
  • Uhhh surely you can do something different than this?: var $button = $('<div>') .....
    – Thomas
    Oct 13 '15 at 22:49
  • @ThomasHorner Yes, as noted, that was just testing. Oct 14 '15 at 14:34
1

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");
}
5
  • Thanks for the ideas--I'll play around with option 2, first, as to avoid conflicting with default attributions. Oct 13 '15 at 18:11
  • Yeah, FWIW I usually just go with some div overlays when I want to have images in my map UI. If background-image does not have the desired effect, just put an image tag in the div itself.
    – Thomas
    Oct 13 '15 at 18:20
  • It looks like OL replaces the contents of the map div. If I view-source, the div is there, but when I inspect the div, it's gone. Oct 13 '15 at 18:26
  • I've never had any issues with that? See this JSFiddle. jsfiddle.net/k7yybgLm/17 Try replacing "HELLLOOOOO" with an image.
    – Thomas
    Oct 13 '15 at 18:31
  • Sorry, it was my code; I was emptying the element for nefarious reasons. Oct 13 '15 at 19:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.