map div has 0 height, width when loading in non-active tab

classic Classic list List threaded Threaded
3 messages Options
crb
Reply | Threaded
Open this post in threaded view
|

map div has 0 height, width when loading in non-active tab

crb
Greetings OL-devvers.

We have an issue that's proving hard to fix/workaround and I'm hoping this forum can help.  We have a .NET app that has a main page with two tabs, a 'Search' tab and a 'Data' tab.  The OL map is in the 'Search' tab.  Whenever the page loads in the Data tab, then the map.div height and width are 0 and the map fails to initialize and throws an exception, which if uncaught causes all subsequent page javascript to fail.  As a test we tried explicitly setting the div height and width to fixed pixel values in the div's style but we get the same results.  

The error occurs when the layer does a loadMapObject() (in this case VirtualEarth, but we've also seen it occur in a vector layer) which does the following:
var veDiv = OpenLayers.Util.createDiv(this.name);
var sz = this.map.getSize();         // returns null
vsDiv.style.width = sz.w + "px";    // throws an exception

and is traceable back to this code in the Map.js:
getSize: function () {
    var size = null;
    if (this.size != null) {
        size = this.size.clone();
    } 

    return size;
}

The full call stack beginning with our custom code is:
this.map.addLayer(layer) -> Map.addLayer() -> layer.setMap(this) -> EventPane.setMap() -> this.loadMapObject() -> VirtualEarth.loadMapObject() -> map.getSize()

When the map successfully loads (i.e. when the active tab is the Search tab) the map.div has the following valid property values (all are based on my screen size, obviously, but importantly non-zero):
clientHeight: 473
clientWidth: 787
offsetHeight: 475
offsetWidth: 789
get scrollHeight: 473
scrollWidth: 787

When it fails, it has the following:
clientHeight: 0
clientWidth: 0
offsetHeight: 0
offsetWidth: 0
get scrollHeight: 0
scrollWidth: 0

Unfortunately forcing the page to load on the Search tab every time is not a viable option for us.

Has anyone else ever run across anything similar and/or have any thoughts on how we might overcome this?
Reply | Threaded
Open this post in threaded view
|

Re: map div has 0 height, width when loading in non-active tab

Gregers Gram Rygg
Hi,

Yes, we had a similar issue recently.

The map div needs to be visible when initializing the map (pleas
correct me if I'm wrong), so we fixed it by waiting to initialize the
map until the first time the map tab is activated.

Regards,
Gregers

On Tue, Oct 19, 2010 at 7:12 PM, crb <[hidden email]> wrote:

>
> Greetings OL-devvers.
>
> We have an issue that's proving hard to fix/workaround and I'm hoping this
> forum can help.  We have a .NET app that has a main page with two tabs, a
> 'Search' tab and a 'Data' tab.  The OL map is in the 'Search' tab.  Whenever
> the page loads in the Data tab, then the map.div height and width are 0 and
> the map fails to initialize and throws an exception, which if uncaught
> causes all subsequent page javascript to fail.  As a test we tried
> explicitly setting the div height and width to fixed pixel values in the
> div's style but we get the same results.
>
> The error occurs when the layer does a loadMapObject() (in this case
> VirtualEarth, but we've also seen it occur in a vector layer) which does the
> following:
>
> var veDiv = OpenLayers.Util.createDiv(this.name);
> var sz = this.map.getSize();         // returns null
> vsDiv.style.width = sz.w + "px";    // throws an exception
>
>
> and is traceable back to this code in the Map.js:
>
> getSize: function () {
>    var size = null;
>    if (this.size != null) {
>        size = this.size.clone();
>    }
>
>    return size;
> }
>
>
> The full call stack beginning with our custom code is:
> this.map.addLayer(layer) -> Map.addLayer() -> layer.setMap(this) ->
> EventPane.setMap() -> this.loadMapObject() -> VirtualEarth.loadMapObject()
> -> map.getSize()
>
> When the map successfully loads (i.e. when the active tab is the Search tab)
> the map.div has the following valid property values (all are based on my
> screen size, obviously, but importantly non-zero):
> clientHeight: 473
> clientWidth: 787
> offsetHeight: 475
> offsetWidth: 789
> get scrollHeight: 473
> scrollWidth: 787
>
> When it fails, it has the following:
> clientHeight: 0
> clientWidth: 0
> offsetHeight: 0
> offsetWidth: 0
> get scrollHeight: 0
> scrollWidth: 0
>
> Unfortunately forcing the page to load on the Search tab every time is not a
> viable option for us.
>
> Has anyone else ever run across anything similar and/or have any thoughts on
> how we might overcome this?
> --
> View this message in context: http://osgeo-org.1803224.n2.nabble.com/map-div-has-0-height-width-when-loading-in-non-active-tab-tp5651744p5651744.html
> Sent from the OpenLayers Dev mailing list archive at Nabble.com.
> _______________________________________________
> Dev mailing list
> [hidden email]
> http://lists.osgeo.org/mailman/listinfo/openlayers-dev
>
_______________________________________________
Dev mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/openlayers-dev
crb
Reply | Threaded
Open this post in threaded view
|

Re: map div has 0 height, width when loading in non-active tab

crb
Thanks for the quick reply Gregers.

We've considered doing something similar (and may have to eventually) but currently the users can nav from the Search/map tab while it is still loading (whether by selecting the other tab or clicking the Search button in the map tab) and between the time the map load starts and the time it needs the div width/height, the width/height could still be 0, causing the map init to fail.  Browser refreshes from other tabs could also cause problems.

I guess all scenarios could be handled by:
- initializing the map the first time the map tab is visible  (as you did)
- disabling all controls on the map tab until the map is fully initialized  (I'm assuming you did this as well)