25

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>
35

You need to call the API to update map size.

http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.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.

  • 1
    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
  • 1
    I also see no reason for the delay, so left it out. Thanks – zod Jan 14 '13 at 11:56
  • 1
    @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
  • 1
    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
8

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();
}
2

Is not elegant, but it worked well for me

window.onresize = function(event)
{
   map.zoomOut(); map.zoomIn();
}
  • this was the only answer that worked for me – Matthew Lock Nov 24 '17 at 10:11
2

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: 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

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

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');
1

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)
})
0

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...

  • 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
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.

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.