Adding a absolutely-positioned DIV to the bottom of an OpenLayers Map?

Question

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.

The link that you are provided is invalid now – Icarus Feb 27 '17 at 09:29 — Icarus, Feb 27 '17 at 09:29

score 10 · Answer 1 · edited Dec 07 '15 at 09:59

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;
    }

score 6 · Accepted Answer · answered Apr 04 '11 at 15:08

6

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;
}

answered Apr 04 '11 at 15:08

igorti

3,828
3
22
29

That's what I was doing originally and the #legend overlay gets bumped down probably 200px from the bottom right corner of #map. setting top to 0px goes way above the top of the #map div as well. Almost as though it's going to the top of the hidden extent of the tiles behind the div or something. – Chris Apr 04 '11 at 16:33
1

well, then there must be something other on the page that is affecting the layout. post your markup so we can probably find the issue. – igorti Apr 05 '11 at 06:32

Adding a absolutely-positioned DIV to the bottom of an OpenLayers Map?

2 Answers2