2

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?

  • 1
    Can you show us your code? – Ian Turton Aug 18 '14 at 16:34
  • just added my code. – Zach Aug 18 '14 at 16:49
  • though it's a work around for not having my JSON in a seperated file. I'll rephrase my question. – Zach Aug 19 '14 at 14:18
0

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);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.