2

I am trying to have my openlayers map fit the size of the browser and also resize every time the browser resizes. So I can have responsive design.

My structure of code is like so

<script type='text/javascript' src='OpenLayers.js'></script>
<script type='text/javascript'>


var map;
var options = {   
  controls: [],
  maxResolution: "auto",
  projection: "EPSG:900913",
  units: 'm'
}

function init(){
 map = new OpenLayers.Map('map_element', options);
 //set layers, styles for vectors layers, set and activate click events etc.
}

</script>


<body onload='init();'>

<div id='map_element' style=" width:800px; height:400px ; z-index:1; position: relative;text-align:center;"> </div>

According to this I tried using

//if browser loads 
//this is inside init() because = body.onload > init > resize map
map = new OpenLayers.Map('map_element', options);
map.updateSize();

//if browser resized
    window.onresize = function()
    {map.updateSize();}

but does not work

Also, if I set style=" width:100%; in the map_element div the map disappears from the page.

What is happening? What am I missing?

Thanks in advance

2 Answers 2

1

Try this:

style="border: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%;"
2
  • Well, works, but not actually works...Setting position:absolute to the map's div makes the div NOT scroll up and down,along with the rest content of the page...Setting position relative fixes the scroll but not the responsive issue. Any advise? Thanks
    – slevin
    Nov 20, 2013 at 0:49
  • EDIT Works even without setting position for the map's div. But there is a precondition. The div that contains the map's div must have width and height. In my case, if I set a height, then some elements overflow, since I have a dynamic content. So , fixes the map, "destroys" the container...Think I'm gonna set no height for the container and just use media queries for the map
    – slevin
    Nov 20, 2013 at 19:04
0

I try something and it gave me good results, you only have to call in events resize and turn

Just put the width and height to 100%

Cannot set map's div height for openlayers map

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.