Search code examples
javascriptdictionaryleafletgeojson

Error message when use addLayer in Leaflet


I use this code to make a join of 2 files of 2 files want to generate json files:

function join(){         
    $.when(
        $.getJSON('bairro.json'),
        $.getJSON('convertJson.php')
    ).done(function(responseGeojson, responseData) {
        var data = responseData[0]
        var geojsonLayer = responseGeojson[0]

        console.log('==geojson==');
        console.log(geojsonLayer);

        var lookup = {};
        data.forEach(function(item) {
            if(item.cod) {
                lookup[item.cod] = {
                    id: item.cod,
                    nome: item.nome,
                    local: item.local
                }           
            }
        })
        console.log('==lookup==');
        console.log(lookup);

        geojsonLayer.features.forEach(function(d) {
            if (lookup[d.properties.CODBAIRRO]) {
                d.properties.joined = lookup[d.properties.CODBAIRRO];
            }
        })

        console.log('==the new==');
        console.log(geojsonLayer);

        L.geoJSON(geojsonLayer).addTo(map);

    })
}

But this error message appears:

TypeError: t.addLayer is not a function

According to the error presented, the problem is in this line of code:

L.geoJSON(geojsonLayer).addTo(map);

I do not know what to do to fix this error, for the code to work.

UPDATE

The Jsons behaving well and are valid, I checked on a validator.

Part of the output of console.log(geojsonLayer); is:

{type: "FeatureCollection", features: Array(161)}
  features:Array(161)
    [0 … 99]

      0:
       geometry:
         coordinates:(50) 
            [Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1)]
        type:"MultiPolygon"
        __proto__:Object
      properties:{OBJECTID: 325, Área: 1705684.49376977, NOME: "Paquetá", REGIAO_ADM: "PAQUETA", AREA_PLANE: "1", …}
      type:"Feature"
      __proto__:Object

      1:{type: "Feature", properties: {…}, geometry: {…}}
      2:{type: "Feature", properties: {…}, geometry: {…}}
      3:{type: "Feature", properties: {…}, geometry: {…}}

Solution

  • That error appears in this case if your layer is not correctly interpreted as JSON, in example because of bad file structure or your geojsonLayer variable is empty so that addTo(map) function cannot process it.

    You may add some error handling to your $.getJSON functions:

    $.getJSON("YOUR-FILE.JSON", function() {
      console.log("success");
    })
    .success(function() { console.log("success"); })
    .error(function() { console.log("error"); })
    .complete(function() { console.log("complete"); })
    .fail(function(jqXHR, status, error){
       if(status == 'parseerror'){
        console.log("not valid json");
       } else {
        console.log("some other error?");
       }
    });
    

    How are your JSONs behaving on this handlers?

    Your code combine two files from different sources so probably the output file structure is not correct as JSON or one of your files has wrong structure to be interpreted as JSON/geoJSON. Can you post your output to some JSON validator? Is it valid?

    Can you please upload output of your console.log(geojsonLayer);?

    You may check adding these files separately with this script - do they separetely add properly to your map?

    I would also strongly suggest you to process your files on server in PHP script which will output with one single properly structured JSON file.