Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

In my web application, I want to enable users to set the size of the map container.

Everything worked fine when the container was expanded slightly (apparently this is because the tiles that were just behind the border were already loaded). However, when the container is expanded significantly (in the following example, from 300 to 1000px in width), there is blank space left.

How to make the map redraw and adapt to the new size?

Calling redraw() on all layers didn't help. Neither did zooming in and out.

I tested this with the described results in Opera, Chrome and Firefox. In IE8, surprisingly, the problem didn't occur and the map automatically adapted.

A simplified webpage for testing:

      #mapbox { 
        width: 300px;
        height: 500px;
        border: 1px solid black;

    <script src=""></script>

    <div id="mapbox"></div>
    <input type="button" id="test" value="resize">

      var map = new OpenLayers.Map('mapbox');
      map.addLayer(new OpenLayers.Layer.OSM());      

        new OpenLayers.LonLat(1000000, 7000000), 5);

      document.getElementById('test').onclick = function() {
        document.getElementById('mapbox').style.width = '1000px';
share|improve this question
up vote 21 down vote accepted

You need to call the API to update map size.

Here's how we do it

window.onresize = function()
  setTimeout( function() { map.updateSize();}, 200);

You can see we did a slight delay, and honestly I don't remember the exact reason why, but we had to give it a slight wait before calling API to resize itself.

share|improve this answer
Well, I believe the delay is your application-specific. ;) Anyway, thank you, once again I missed something in the docs. – Imp Aug 14 '12 at 12:32
I also see no reason for the delay, so left it out. Thanks – zod Jan 14 '13 at 11:56
@Vadim Great anser, but does not work for me. My code is like body onload=init() and init initializes the map. Is it because of that? Also , would this be a good solution for responsive design? window.onload=window.onresize=function(){//resize here. Thanks – slevin Nov 19 '13 at 0:07
I wonder if setTimout was an attempt at making it call only every 200ms. Unfortunately it's a bit more complicated, need to have a setInterval that runs every 200 ms, then have a boolean var didResize that is set to true onresize(), and set to false after map.updateSize() is called. – andrewb Feb 4 '14 at 6:06
The setTimeout was likely to ensure the map was loaded and rest of the dom was rendered. I'm presently using the same hack due to my lack of understanding of Marionette view lifecycle. – ca0v Mar 30 '15 at 14:44

Yes, use map.updateSize() as Vadim says (also not sure why the delay!) documentation

I commonly put a fullscreen toggle button on maps, which works simply by switching the css class of the map container and then calling updateSize()

function toggleFullScreen(mapContainer) {
    if ($(mapContainer).hasClass("normal")) {
    } else {
share|improve this answer

Is not elegant, but it worked well for me

window.onresize = function(event)
   map.zoomOut(); map.zoomIn();
share|improve this answer
genius my friend, neat hack, genius, thanks. – Gery Jul 21 at 16:56

Another comment to the first (correct) answer:

The timeout-Event is needed if you wait for the window.resize event. Otherwise the map will be resized every millisecond if a user starts resizing the window (i needed it for Firefox). Therefore if you want to check for Window-size, then the timeout is quite useful resp. needed. See: or jQuery resize end event

(sorry, i can't add a comment, therefore another answer)

share|improve this answer

i think changing the style of map div automatically will change the size of map panel.

document.getElementById("map-panel").style.width = "500px";

i hope it helps you...

share|improve this answer
On resizing changing the container's size attributes works for the map, but not for the drawn features. Adding updateSize() ensure that the features are visible. – kode Dec 21 '12 at 9:47

I tried all the things described here but nothing worked for me. So, I realized that when I was putting a 'full-screen' class to the map the resize event was not been fired. I fix this with:

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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