Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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>
share|improve this question

5 Answers 5

up vote 12 down vote accepted

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.

share|improve this answer
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
    
@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 at 6:06

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: http://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)

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

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

Your Answer

 
discard

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.