Map disappears when size changes

[BrianBeck]

My JS app (v3.6) has two parts: map and form.  Both are in absolutely positioned divs that toggle display.  In other words, when the map is visible, the form is set to display = none and when the form is set to display = block, the map is set to display = none.

I am finding that if I go to the form page and move my browser from one monitor to another or even change the size of my browser window, when I return to the map page the map is not visible.  If I resize the map after returning to the map page, I only see a strip of map vertically in the center of the page and I get 2 error messages in my console that say:

Error: Invalid value for <image> attribute x="NaN" svg.js:15
Error: Invalid value for <image> attribute y="NaN" svg.js:15

How can I refresh the map so that it will show up even if the window size is changed while it is hidden.  As far as I can tell, everything works fine if I change the window size while the map is visible.

[MatthewLofgren · Accepted solution]

My JS app (v3.6) has two parts: map and form.  Both are in absolutely positioned divs that toggle display.  In other words, when the map is visible, the form is set to display = none and when the form is set to display = block, the map is set to display = none.

I am finding that if I go to the form page and move my browser from one monitor to another or even change the size of my browser window, when I return to the map page the map is not visible.  If I resize the map after returning to the map page, I only see a strip of map vertically in the center of the page and I get 2 error messages in my console that say:

Error: Invalid value for <image> attribute x="NaN" svg.js:15
Error: Invalid value for <image> attribute y="NaN" svg.js:15

How can I refresh the map so that it will show up even if the window size is changed while it is hidden.  As far as I can tell, everything works fine if I change the window size while the map is visible.

Set autoResize to false

var map = new Map("mapPane", {    autoResize : false, //.....

Handle the map resize only when the map is visible:

on(window, 'resize', function() {         // prevent map from resizing when not visible. This would error otherwise    if ( map is visible ) //pseudo code    {      map.resize();     map.reposition();    }      });

also after your map becomes visible, call resize() and reposition()

[RanaRameez]

You save my life bro!

Thanks a lot!

[BrianBeck]

Thanks Matt, that worked perfectly.