How to redraw / refresh map on canvas resize?

Question

I've created a web page that contains a button to set the map full screen and back to its normal form, the problem map doesn't set to full screen until I resize the output window, how to overcome this,

Any guidance and help is appreciated.

Here is the working example: Demo

Answer 1

Add map.updateSize(); to the end of $("#btn-full-screen").click...

DEMO

updateSize documentation

This function should be called by any external code which dynamically changes the size of the map div (because mozilla wont let us catch the “onresize” for an element)

Answer 2

You can use OpenLayers.Map.updateSize method to redraw your base Layer when you maximize the map.

So, adding a function like:

var fullScreen = function () {
    map.baseLayer().redraw();
}

you would only need to add an additional option to your map:

var map = new OpenLayers.Map({
    div: "map",
    center: new OpenLayers.LonLat(0, 0),
    updateSize: fullScreen,
    minResolution: "auto",
    minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
    maxResolution: "auto",
    maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
    projection: Mercator,
    displayProjection: Geographic
});

Good luck!

Answer 3

Write the following code whenever you are required to redraw the map like on window resize or on tabs change or full screen or on any other event according to your need.

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

this will automatically trigger the updateSize() function internally.