topic Re: Map disappears when size changes in ArcGIS JavaScript Maps SDK Questions

Map disappears when size changes

BrianBeck — Tue, 10 Sep 2013 15:02:30 GMT

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.

Re: Map disappears when size changes

MatthewLofgren — Tue, 10 Sep 2013 15:11:35 GMT

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

Re: Map disappears when size changes

BrianBeck — Tue, 10 Sep 2013 15:17:01 GMT

Thanks Matt, that worked perfectly.

Re: Map disappears when size changes

RanaRameez — Fri, 12 Aug 2022 11:15:23 GMT

You save my life bro!

Thanks a lot!