Geek Answers Handbook

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

I am trying to place a static image legend in the lower right corner of an OpenLayers map on top of the map. I tried with an absolutely positioned DIV, but it tends to collide with other objects (even with a high z-index).

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

+6
javascript css openlayers
source share
2 answers

It should definitely work on the absolute position of the div inside the div div with a higher z-index (e.g. 10000)

Consider the 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; }
+4
source share

I ran into 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 the source of the page).

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

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

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

  div.olControlAttribution { left:10em; top:10em; }
+9
source share

More articles:


All Articles