4

I'm making a cloropleth map with geoJSON and Leaflet. Right now each year has a separate geoJSON file and I load each of them as below:

function loadGeoJSON(data) {
        var json = null;
        $.ajax({
            async: false,
            global: false,
            url: data,
            dataType: "json",
            success: function (data) {
                json = data;
            }
        });
        return json;
    }


  var ccc2 = loadGeoJSON("t2015.geojson");
    var t2015 = L.geoJson(ccc2, {
        style: style,      
  onEachFeature: onEachFeature

    });
map.addLayer(t2015);

var ccc3 = loadGeoJSON("t2014.geojson");
    var t2014 = L.geoJson(ccc3, {
        style: style,      
  onEachFeature: onEachFeature

    });

The geoJSON are of countries and are the same each year. I would like to combine the geoJson files into one with each feature having the attributes: 2014_1, 2014_2, 2014_3, 2015_1, 2015_2, 2015_3 etc. Is it possible to load one file with all years and break it into variables which only has the attributes from a single year (i.e. 2014_1, 2014_2, 2014_3) so they can be separate layers on the map?

EDIT: SAMPLE COMBINED GEOJSON (note: geographies are not in full)

 
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
{ "type": "Feature", "properties": { "FIPS_CNTRY": "AG", "CNTRY_NAME": "Algeria", "2013": 9698, "2013_2": 9545, "2014": 266, "2014_2": 52918, "2015": 91, "2015_2": 842 }, "geometry": { "type": "Polygon", "coordinates": [ [ -5.152134895324707, 30.180469512939453 ], [ -5.139167308807373, 30.192359924316406 ], [ -5.080972671508789, 30.262359619140625 ], [ -5.048055648803711, 30.316665649414063 ], [ -5.029167175292969, 30.359165191650391 ], [ -5.010833740234375, 30.393886566162109 ]]}},
{ "type": "Feature", "properties": { "FIPS_CNTRY": "AL", "CNTRY_NAME": "Albania", "2013": 7326, "2013_2": 1245, "2014": 834, "2014_2": 135, "2015": 785, "2015_2": 134 }, "geometry": { "type": "Polygon", "coordinates":  [ [ 20.791923522949219, 40.431541442871094 ], [ 20.787220001220703, 40.394721984863281 ], [ 20.758609771728516, 40.311943054199219 ], [ 20.73680305480957, 40.307220458984375 ], [ 20.714302062988281, 40.270099639892578 ], [ 20.721246719360352, 40.225135803222656 ]] }},
{ "type": "Feature", "properties": { "FIPS_CNTRY": "AN", "CNTRY_NAME": "Andorra", "2013": 6698, "2013_2": 9578, "2014": 24266, "2014_2": 546, "2015": 425, "2015_2": 3145 }, "geometry": { "type": "Polygon", "coordinates":  [ [ 1.445833206176758, 42.601943969726563 ], [ 1.486527681350708, 42.650413513183594 ], [ 1.559722185134888, 42.655967712402344 ], [ 1.698333263397217, 42.626106262207031 ], [ 1.738610982894898, 42.616386413574219 ], [ 1.78171968460083, 42.569961547851563 ]]}},
{ "type": "Feature", "properties": { "FIPS_CNTRY": "AU", "CNTRY_NAME": "Austria", "2013": 2592, "2013_2": 311, "2014": 66, "2014_2": 511, "2015": 242, "2015_2": 8664 }, "geometry": { "type": "Polygon", "coordinates":  [ [ 10.471235275268555, 46.871353149414063 ], [ 10.488205909729004, 46.935993194580078 ], [ 10.429998397827148, 46.984161376953125 ], [ 10.390763282775879, 47.002567291259766 ], [ 10.350624084472656, 46.991241455078125 ], [ 10.323331832885742, 46.955551147460938 ]] }},
]
}


2
  • can you post a sample of the json files you want to combine? Or a link to a couple of complete ones if they are public?
    – toms
    Dec 11, 2015 at 19:54
  • Once your GeoJSON data is merged in a single object with different property keys for each year, you would probably load it with L.geoJson several times (once per layer / year / quarter?) with a different onEachFeature function each time (so that it reads the appropriate property key).
    – ghybs
    Dec 15, 2015 at 5:04

1 Answer 1

2

Yes. Add a function that loops over the features in the geojson file and split them on the desired attribute values, returning several feature-collections.

And, please look into handling async ajax calls and deal with callbacks..

1
  • Just to add to this, be careful with Javascript as it is Asynchronous. See: rowanmanning.com/posts/javascript-for-beginners-async What will happen is that in your code you are returning values and assigning them to something that is used later. Note that code in Javascript isn't executed in sequence, but based on what finishes first... Just be aware!
    – Alex Leith
    Feb 13, 2017 at 23:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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