OpenLayers - redrawing map after container resize

Question

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:

<html>
  <head>
    <style>
      #mapbox { 
        width: 300px;
        height: 500px;
        border: 1px solid black;
      }
    </style>

    <script src="http://openlayers.org/api/OpenLayers.js"></script>
  </head>

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

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

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

      document.getElementById('test').onclick = function() {
        document.getElementById('mapbox').style.width = '1000px';
      }
    </script>
  </body>
</html>

score 45 · Accepted Answer · edited Mar 08 '22 at 20:43

45

You need to call the API to update map size.

https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#updateSize

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.

edited Mar 08 '22 at 20:43

CodeBard

3,511
1
7
20

answered Aug 13 '12 at 19:01

Vadim

3,971
2
29
42

score 9 · Answer 2 · answered Aug 14 '12 at 10:21

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")) {
        $(mapContainer).addClass("fullscreen").removeClass("normal");
    } else {
        $(mapContainer).addClass("normal").removeClass("fullscreen");
    }
    map.updateSize();
}

score 3 · Answer 3 · edited Nov 26 '22 at 05:25

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

score 2 · Answer 4 · answered Jan 22 '14 at 07:58

2

Is not elegant, but it worked well for me

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

answered Jan 22 '14 at 07:58

JFHack

29
1

score 1 · Answer 5 · answered Sep 04 '14 at 17:13

1

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:

$(window).trigger('resize');

answered Sep 04 '14 at 17:13

nicolasaiz173

111
1

score 1 · Answer 6 · answered May 02 '18 at 05:54

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) {
    clearTimeout(window.resizeMapUpdateTimer)
  }
  window.resizeMapUpdateTimer= setTimeout(function () {
    // Update container size
    map.updateSize()
  }, 200)
})

score 1 · Answer 7 · edited Nov 26 '22 at 05:25

1

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

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

edited Nov 26 '22 at 05:25

PolyGeo

65,136
29
109
338

answered Aug 14 '12 at 07:48

urcm

22,533
4
57
109

score 0 · Answer 8 · answered Aug 07 '18 at 13:11

0

This is working for me:

this.$nextTick(
    function() {
        OL_MAP_INSTANCE.updateSize();
    }
);

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

answered Aug 07 '18 at 13:11

Doctor

143
9

OpenLayers - redrawing map after container resize

8 Answers8

Linked