jquery - Add Leaflet GeoJSON layers from GeoServer to an Array using a Javascript loop -
i'm trying add geojson layers array using loop, , showing them on map.
my goal have variable this: scenario_json[1] = layer1, scenario_json[2] = layer2, etc...
myurl = [ "http://localhost:8080/geoserver/jonquiere_local/ows?service=wfs&version=1.0.0&request=getfeature&typename=jonquiere_local:buildings_phase1&maxfeatures=400&maxfeatures=400&outputformat=json&format_options=callback:getjson", "http://localhost:8080/geoserver/jonquiere_local/ows?service=wfs&version=1.0.0&request=getfeature&typename=jonquiere_local:buildings_phase2&maxfeatures=400&outputformat=json&format_options=callback:getjson", "http://localhost:8080/geoserver/jonquiere_local/ows?service=wfs&version=1.0.0&request=getfeature&typename=jonquiere_local:buildings_phase3&maxfeatures=400&outputformat=json&format_options=callback:getjson" ]; $.getscript('src/leaflet.js'); for(i=0;i<=myurl.length;i++){ var scenario_json = {}; scenario_json[i] = new l.geojson(); function getjson(data){ console.log(data) scenario_json[i].adddata(data); } $.ajax({ url: myurl[i], jsonp: false, datatype: "json", jsonpcallback: "getjson", success: getjson }) };
i getting response in console:
object {readystate: 1} vm3689:10 object {type: "featurecollection", totalfeatures: 386, features: array[386], crs: object} vm3689:11 uncaught typeerror: cannot read property 'adddata' of undefinedgetjson @ vm3689:11c @ jquery.min.js:3p.firewith @ jquery.min.js:3k @ jquery.min.js:5r @ jquery.min.js:5 vm3689:10 object {type: "featurecollection", totalfeatures: 377, features: array[377], crs: object} vm3689:11 uncaught typeerror: cannot read property 'adddata' of undefined
any idea why doesn't work ?
thanks
what's happening scenario_json
doesn't exist in context of getjson
callback.
i'm unsure why you're using jsonp since it's old workaround making crossdomain requests. don't need since you're working localhost/same domain @ moment. try use plain xhr json instead of jsonp.
remove formatoptions
url's:
myurl = [ "http://localhost:8080/geoserver/jonquiere_local/ows?service=wfs&version=1.0.0&request=getfeature&typename=jonquiere_local:buildings_phase1&maxfeatures=400&maxfeatures=400&outputformat=json", "http://localhost:8080/geoserver/jonquiere_local/ows?service=wfs&version=1.0.0&request=getfeature&typename=jonquiere_local:buildings_phase2&maxfeatures=400&outputformat=json", "http://localhost:8080/geoserver/jonquiere_local/ows?service=wfs&version=1.0.0&request=getfeature&typename=jonquiere_local:buildings_phase3&maxfeatures=400&outputformat=json" ];
switch $.getjson
:
for (i = 0; <= myurl.length; i++) { var scenario_json = {}; $.getjson(myurl[i], function (data) { scenario_json[i] = new l.geojson(data); }).done(function () { console.log('$.getjson done!'); }).fail(function () { console.log('$.getjson fail!'); }); }
here's working example on plunker: http://plnkr.co/edit/fnf9cdtbccsj3cavvjjy?p=preview
ps. if ever run crossdomain issues can simple solve enabling cors on geoserver.
Comments
Post a Comment