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="http://openlayers.org/api/OpenLayers.js"></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';

8 Answers 8


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.


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 {

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: https://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac or jQuery resize end event


Is not elegant, but it worked well for me

window.onresize = function(event)
   map.zoomOut(); map.zoomIn();

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:


The way setTimeout is used above doesn't make a lot of sense to me (maybe a workaround for an older OL version), but setTimeout can be used to reduce the number of calls to map.updateSize(), and other associated code like this:

$(window).resize(function () {
  if (window.resizeMapUpdateTimer) {
  window.resizeMapUpdateTimer= setTimeout(function () {
    // Update container size
  }, 200)

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

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

This is working for me:

    function() {

The $nextTick is important because it will allow to wait the next refresh before taking into account the new size of the map container.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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