I'm trying to position a static image legend in the bottom-right corner of an OpenLayers map on top of the map. I've tried with an absolutely positioned DIV, but it tends to get bumped around by other objects (even with a high z-index).

Is there a way to do this using the OpenLayers API? I noticed OpenMap has a Layer.ScreenOverlay method (.html) which is exactly what I need, but no such method exists in OpenLayers that I can find.

I'm trying to position a static image legend in the bottom-right corner of an OpenLayers map on top of the map. I've tried with an absolutely positioned DIV, but it tends to get bumped around by other objects (even with a high z-index).

Is there a way to do this using the OpenLayers API? I noticed OpenMap has a Layer.ScreenOverlay method (http://openspace.ordnancesurvey.co.uk/openspace/example7.html) which is exactly what I need, but no such method exists in OpenLayers that I can find.

• javascript
• css
• openlayers

• The link that you are provided is invalid now – Icarus Commented Feb 27, 2017 at 9:29

2 Answers 2

I've encountered a similar problem, where I wanted to place a static image legend on an OpenLayers map. My solution was to use the attribution element http://dev.openlayers.org/examples/attribution.html (look at page source).

You can change the attribution to an image instead of text:

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

As for changing the position of the attribution on the map, you can change the css properties of div.olControlAttribution, e.g.

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

It should definitely work to absolutely position a div inside map div with higher z-index(10000 for example)

Consider following html and CSS code:

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

#legend{
    position:absolute; 
    right:10px; 
    bottom:10px; 
    z-index:10000; 
    width:100px; 
    height:100px; 
    background-color:#FFFFFF;
}