Maximum number of layers in OpenLayers2 with GeoExt

Question

I have been developing web gis application that requires around 45 different layers served from GeoServer. I had created OpenLayers WMS layers and added them to GeoExt, everything works fine till the 35th layer after I add 36th layer then OpenLayersgives pink tiles. Here is my snippet:

 WGS84 = new OpenLayers.Projection("EPSG:4326");
             WGS84_google_mercator = new OpenLayers.Projection("EPSG:900913");

             map = new OpenLayers.Map({
                 height: '300px',
                 // allOverlays:true,
                 width: '500px',
                 projection: WGS84_google_mercator, displayProjection: WGS84,
                 maxExtent: new OpenLayers.Bounds(80.0509262084961, 26.348379135131836, 88.20467376708984, 30.4458065032959).transform(new OpenLayers.Projection("EPSG:4326"), WGS84_google_mercator),
                 //  )
                 controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.ArgParser(),
        new OpenLayers.Control.Attribution()
                 ]
             });
nnt_dyear_child_layer=new OpenLayers.Layer.WMS("Child Death Rate Yearly",
                         "hostname1/geoserver/wms", {
                             name: 'nnt_indicator_d',
                             layers: "vpdms:nnt_dyear-child", transparent: true,
                             //viewparams: a,
                         }, {
                             layerid: 'nnt_dyear-child_layer',
                             singleTile: true,
                             visibility: false,
                             group: "Indicators/NNT"
                         });
 nnt_dweek_child_layer=new OpenLayers.Layer.WMS("Child Death Rate Weekly",
                         "hostname1/geoserver/wms", {
                             name: 'nnt_indicator_d',
                             layers: "vpdms:nnt_dweek-child", transparent: true,
                             //viewparams: a,
                         }, {
                             layerid: 'nnt_dweek-child_layer',
                             singleTile: true,
                             visibility: false,
                             group: "Indicators/NNT"
                         });
map.addLayers([nnt_dweek_child_layer,nnt_dyear_child_layer]);



and finally  a geoext tree to hold the layer list:
tree1 = new GeoExt.ux.tree.LayerTreeBuilder({
                 region: "west",
                // title: "Layers",
                 renderTo: 'layers',
                 width: 240,
                 height:200,
                 autoScroll: true,
                 rootVisible: false,
                 lines: false,
                 enableDD :true,
                 // widget custom properties
                 wmsLegendNodes: true,
                 vectorLegendNodes: true
             });

I have used google base layers. I'm using openlayers 2.11 and geoext 2 Btw I have already read Here and Official Here Any help would be great.

Answer 1

As stated here:

The limit is about 75. After that, layers can appear above popups. This has to do with the z-index in CSS (determines what is 'above' what). Layers (overlay) start at a z-index of 325. Popups start at 750. Controls start at 1000.

Every layer 'takes up' about 5 indexes, so it will reach it's limit at around 75 layers. You cannot have more than 250 popups for the same reason.

If you need more than 75 layers, consider destroying the ones you don't show instead of hiding them and recreate them when needed.

So, your problem must be in the 36th layer. Perhaps, you need to do first a geometry validation for that layer. (Or maybe it has a different EPSG).