[GIS] Adding multiple WMS layers in OpenLayers

javascriptopenlayers-2wms

I have an array of layers that I am passing to map.addLayers(). When I pass the array to the function in $(document).ready(function (){}), it doesn't add them to the map (i.e. map.layers does not have any of the new layers added. But if I open up the JavaScript console and run the function, it works and my added layers appear.

Here's my code:

function crear( n ){
        $.getJSON('json/capas.json', function(data) {
            console.log(data);
          for (var i=0; i < n.length; i++) {
                    capaObjetos[i] = new OpenLayers.Layer.WMS(
                                  data[0][i]["id"],
                                  data[0][i]["url"],
                                  {
                                  "layers": data[0][i]["layers"],
                                    transparent: true,
                                    format:"image/png",
                                    CQL_FILTER: queryCQL(i),
                                    projection: map.projection,
                                    displayOutsideMaxExtent: false
                                  },
                                  {
                                    singleTile: true,
                                    ratio: 1,
                                    buffer: 0,
                                    visibility: false
                                  }
                              );
                  // console.log(capaObjetos[i]);


          }

            for (var key in capaObjetos) {
                  var value = capaObjetos[key];
                  agregadas.push(value);
            }

        });

}

agregadas = [ ];


var crasicaule, microfilo, rosetofilo, submontano, perennifolia, caducifolia, encino, pino, mezquite, tascate, mesofilo, oyamel, inducidos, halofilo, 
natural, cultivados, gipsofilo, riego, temporal, mezquital, tular, sinvegetacion, asentamientos, carretera;

var capaObjetos = {
          "0": crasicaule,
          "1": microfilo,
          "2": rosetofilo,
          "3": submontano,
          "4": perennifolia,
          "5": caducifolia,
          "6": encino,
          "7": pino,
          "8": mezquite,
          "9": tascate,
          "10": mesofilo,
          "11": oyamel,
          "12": inducidos, 
          "13": halofilo,
          "14": natural,
          "15": cultivados,
          "16": gipsofilo,
          "17": riego, 
          "18": temporal,
          "19": mezquital,
          "20": tular,
          "21": sinvegetacion,
          "22": asentamientos,
          "23": carretera
};

$(document).ready(function () {
            capaBase();
            TreeMenu();

// ======= ADD LAYERS TO THE MAP ===========

           map.addLayers(agregadas);
});

OpenLayers is initialized in capaBase().

I've tried adding them individually in a for loop but that also doesn't work either.

Any ideas?

UPDATE

If I change my create function and move my JSON locally, it works just fine.

  function crear( n ){
      console.log("crear capa: " + n);

      for (var i=0; i < n.length; i++) {   
          capaObjetos[i] = new OpenLayers.Layer.WMS(
                          capas[0][i]["id"],
                          capas[0][i]["url"],
                          {
                          "layers": capas[0][i]["layers"],
                            transparent: true,
                            format:"image/png",
                            CQL_FILTER: queryCQL(i),
                            projection: map.projection,
                            displayOutsideMaxExtent: false
                          },
                          {
                            singleTile: true,
                            ratio: 1,
                            buffer: 0,
                            visibility: false
                          }
                      );
          console.log(capaObjetos[i]);
    }
    // push capas de 'USO DEL SUELO Y VEGETACION' a una arregla, agregadas
              for(var key in capaObjetos) {
                  var value = capaObjetos[key];
                  agregadas.push(value);
              }
  }

Here's the JSON I'm using.

[{
          "0": {"id":"crasicaule", "class":"MATORRAL", "field":"CVE_UNION", "values": [{"0":"MC"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "1": {"id":"microfilo", "class":"MATORRAL", "field":"CVE_UNION", "values": [{"0":"MDM"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "2": {"id":"rosetofilo", "class":"MATORRAL", "field":"CVE_UNION", "values": [{"0":"MDR"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "3": {"id":"submontano", "class":"MATORRAL", "field":"CVE_UNION", "values": [{"0":"MSM"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "4": {"id":"perennifolia", "class":"SELVAS", "field":"CVE_UNION", "values": [{"0":"SAP"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "5": {"id":"caducifolia", "class":"SELVAS", "field":"CVE_UNION", "values": [{"0":"SBC"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "6": {"id":"encino", "class":"BOSQUES", "field":"CVE_UNION", "values": [{"0":"BQ"},{"1":"BQP"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "7": {"id":"pino", "class":"BOSQUES", "field":"CVE_UNION", "values": [{"0":"BP"},{"1":"BPQ"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "8": {"id":"mezquite", "class":"BOSQUES", "field":"CVE_UNION", "values": [{"0":"BP"},{"1":"BPQ"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "9": {"id":"tascate", "class":"BOSQUES", "field":"CVE_UNION", "values": [{"0":"BJ"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "10": {"id":"mesofilo", "class":"BOSQUES", "field":"CVE_UNION", "values": [{"0":"BM"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "11": {"id":"oyamel", "class":"BOSQUES", "field":"CVE_UNION", "values": [{"0":"BA"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "12": {"id":"inducidos", "class":"PASTIZALES", "field":"CVE_UNION", "values": [{"0":"PI"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"}, 
          "13": {"id":"halofilo", "class":"PASTIZALES", "field":"CVE_UNION", "values": [{"0":"PH"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "14": {"id":"natural", "class":"PASTIZALES", "field":"CVE_UNION", "values": [{"0":"PN"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "15": {"id":"cultivados", "class":"PASTIZALES", "field":"CVE_UNION", "values": [{"0":"PC"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "16": {"id":"gipsofilo", "class":"PASTIZALES", "field":"CVE_UNION", "values": [{"0":"PY"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "17": {"id":"riego", "class":"AGRICULTURA", "field":"CVE_UNION", "values": [{"0":"RA"},{"1":"RAP"},{"2":"RAS"},{"3":"RP"},{"4":"RS"},{"5":"RSP"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"}, 
          "18": {"id":"temporal", "class":"AGRICULTURA", "field":"CVE_UNION", "values": [{"0":"TA"},{"1":"TAP"},{"2":"TAS"},{"3":"TP"},{"4":"TS"},{"5":"TSP"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "19": {"id":"mezquital", "class":"VEGETACION", "field":"CVE_UNION", "values": [{"0":"MKX"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "20": {"id":"tular", "class":"VEGETACION", "field":"CVE_UNION", "values": [{"0":"VT"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "21": {"id":"sinvegetacion", "class":"VEGETACION", "field":"CVE_UNION", "values": [{"0":"DV"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "22": {"id":"asentamientos", "class":"INFRASTRUCTURA", "field":"CVE_UNION", "values": [{"0":"AH"}], "layers":"mx:usv250s5_union", "url":"http://localhost:8082/geoserver/wms"},
          "23": {"id":"carretera", "class":"INFRASTRUCTURA", "field":"EDO_CLAVE", "values": [{"0":"29"}], "layers":"tlx:carreteraTLX", "url":"http://localhost:8082/geoserver/wms"}}]

For maintenanance reasons, I would like to keep the JSON as a separate file and to have it loaded into the function.

So my updated question is: Why would loading the JSON from an external file be treated differently in OpenLayers, than loading the JSON locally?

Best Answer

try adding each layer (or a list of layers, it's as you prefer) in the succes fonction of your $.getJSON and call crear() in your document ready. If not, map.addLayers([]) will be called before the response is completed... so it will try to add an empty list

function crear( n ){
        $.getJSON('json/capas.json', function(data) {
            console.log(data);
          for (var i=0; i < n.length; i++) {
                    wmsLayer = new OpenLayers.Layer.WMS(
                                  data[0][i]["id"],
                                  data[0][i]["url"],
                                  {
                                  "layers": data[0][i]["layers"],
                                    transparent: true,
                                    format:"image/png",
                                    CQL_FILTER: queryCQL(i),
                                    projection: map.projection,
                                    displayOutsideMaxExtent: false
                                  },
                                  {
                                    singleTile: true,
                                    ratio: 1,
                                    buffer: 0,
                                    visibility: false
                                  });
                 map.addLayer(wmsLayer);
          }
       }
}


$(document).ready(function () {
    crear(n);
}
Related Question