How to resolve the following error: Uncaught TypeError: t.addLayer is not a function-CodePudding

I am a little stuck with this error and was hoping someone could shed some light on the issue.

At the moment I am trying to add a geoJSON layer to my Leaflet Map, more specifically a multi polygon which shows the country borders. I am using an AJAX request to a PHP routine that returns the data from a large geo.json file containing country data.

Where I am stuck is trying to add the country borders/polygon to the map, the following error keeps printing to the console.

CONSOLE LOG ERROR:

Layer.js:52 Uncaught TypeError: t.addLayer is not a function
    at i.addTo (Layer.js:52)
    at Object.success (index.js:104)
    at fire (jquery-3.6.0.js:3500)
    at Object.fireWith [as resolveWith] (jquery-3.6.0.js:3630)
    at done (jquery-3.6.0.js:9796)
    at XMLHttpRequest.<anonymous> (jquery-3.6.0.js:10057)

I suspect that I am doing something wrong in my ajax success function with how I am trying to add the data to the map however after a couple of days of trying different things I now need advice from the experts :).

Also I have checked that my files are linked correctly.

Any suggestions would be most appreciated, thank you!

SOME OF MY CODE:

//LEAFLET MAP INITIALISATION

var map = L.map('map').setView([51.509, -0.08], 15);

L.tileLayer('https://tile.thunderforest.com/atlas/{z}/{x}/{y}.png?apikey={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="http://www.thunderforest.com/">Thunderforest</a>',
    maxZoom: 18,
    id: 'thunderforest/atlas',
    accessToken: 'a794617134d14b1f82f1cd09d35bca51'
}).addTo(map);

    var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);

    var marker = new L.Marker([51.509, -0.08]);
    marker.addTo(map);

});

//COUNTRY BORDER AJAX REQUEST


$('#borderSearch').click(function(){
        
        $.ajax({
        url: "lib/php/border.php",
        type: "POST",
        dataType: 'json',
        data: {
            code: $('#countryName').val()
        },

        success: function(result) {

        var borderData = JSON.stringify(result);
        
        var parsedGeoJson = JSON.parse(borderData);

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

    },

        error: function(jqXHR, textStatus, errorThrown){
            console.log("Request Failed");
        }
    });

  });

CodePudding user response：

Your map variable is initialized in another function and not accessible global.

var map;
$.ready(function(){ // Your function, I don't know what you do here, but I that you call this code in a function. Maybe `.ready(` or something like this
    map = L.map('map').setView([51.509, -0.08], 15);

    L.tileLayer('https://tile.thunderforest.com/atlas/{z}/{x}/{y}.png?apikey={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="http://www.thunderforest.com/">Thunderforest</a>',
        maxZoom: 18,
        id: 'thunderforest/atlas',
        accessToken: 'a794617134d14b1f82f1cd09d35bca51'
    }).addTo(map);

    var polygon = L.polygon([
        [51.509, -0.08],
        [51.503, -0.06],
        [51.51, -0.047]
    ]).addTo(map);

    var marker = new L.Marker([51.509, -0.08]);
    marker.addTo(map);
});

And know that map variable is global and you can use it in the other functions like the click listener.

I'm pretty sure that if you add console.log(map) before L.geoJSON(parsedGeoJson).addTo(map); that it will print undefined