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

see also here https://gis.stackexchange.com/questions/31409/openlayers-redrawing-map-after-container-resize — Matthew Lock, Nov 24 '17 at 10:12

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

13

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)

edited Mar 08 '22 at 20:43

CodeBard

3,511
1
7
20

answered Sep 04 '12 at 14:53

CaptDragon

13,313
6
55
96

score 5 · Answer 2 · edited Mar 08 '22 at 20:43

5

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!

edited Mar 08 '22 at 20:43

CodeBard

3,511
1
7
20

answered Sep 04 '12 at 08:29

DaniBaeyens

51
3

It doesn't set map to full screen, can you please update the fiddle. – bios Sep 04 '12 at 08:57
Thanks. I had tiles becoming white when zooming using transitionEffect: 'resize'. map.baseLayer().redraw(); fixed it. – Nicolas Boisteault Jan 06 '16 at 15:50

score 0 · Answer 3 · answered Aug 28 '16 at 13:48

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.

How to redraw / refresh map on canvas resize?

3 Answers3

DEMO