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