Uncaught TypeError: Cannot read property 'addLayer' of undefined

Question

I'm trying to use leaflet markercluster. but when I run it, gives me an error as:

Uncaught TypeError: Cannot read property 'addLayer' of undefined

my code in functions.js is:

for (var i in ODO) {
    var latlng = L.latLng({ lat: ODO[i].LastX, lng: ODO[i].LastY });

    L.marker( latlng ).addTo(map);
}
var markerClusters = new L.MarkerClusterGroup().addTo(map);
for ( var i = 0; i < ODO.length ; i++ )
{
    var popup = ODO[i].branchcode +
                '<br/><b>دوره:</b> ' + ODO[i].saleprd +
                '<br/><b>سال :</b> ' + ODO[i].saleyear;

    var map = L.marker( [ODO[i].LastX, ODO[i].LastY] )
                    .bindPopup( popup );

    markerClusters.addLayer( map );
}

map.addLayer( markerClusters );
markerClusterLayer = L.markerClusterGroup({
    disableClusteringAtZoom: 13
}).addTo(map);

and the order of calling cdn is:

<!---leaflet css -->
<link rel="stylesheet" href="css/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<!---marker cluster css -->
<link rel="stylesheet" href="css/MarkerCluster.css" />
<link rel="stylesheet" href="css/MarkerCluster.Default.css" />
<script src="script/config.js"></script>
<!-- Load Leaflet from CDN -->
<script src="script/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="script/jquery-3.4.1.min.js"></script>
<!-- marker Cluster CDN -->
<script src="script/leaflet.markercluster.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="script/esri-leaflet.js"></script>
<!--- amCharts CDN -->
<script src="script/core.js"></script>
<script src="script/charts.js"></script>
<script src="script/maps.js"></script>
<script src="script/animated.js"></script>

also, I have the leaflet layer code in my app.js like this:

function Init_Map()
{

    map = L.map('map').setView( [36.564012,53.060300], 8);
// add the OpenStreetMap tiles
        L.tileLayer('http://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}&s=Ga', {
            maxZoom: 19,
            attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
        }).addTo(map);
    }

does anyone know the reason for this error?

Can you confirm that the error is in the line: map.addLayer( markerClusters ); Because it seems that map variable is not initialized in the context, maybe map should be a global variable of your script — Calvin Nunes
can you remove the "new" from this line "new L.MarkerClusterGroup().addTo(map);" — Berke Kaan Cetinkaya
I tried to remove but would get the error: MarkerClusterGroup() is not defined — Depie
@CalvinNunes can it be because I made the cluster function in another file? what can I do if I want to get the map vlue still? because I want this function to work when I click on a button. first, it will recieve the data from my ajax-url and json data, and then this function will make it show on map — Depie
@Depie probably... I would have the funcion Init_Map in the same file of the one that uses map.addLayer(... and I would create the map variable as global... Or, you can make your Init_Map return the map variable, then you can store map in another place that calls the function as let map = Init_Map() — Calvin Nunes

Depie Depie · Accepted Answer · 2020-11-13T16:28:53

I called the Init_Map(); function in the last part of my markerclustering function and it just worked

Uncaught TypeError: Cannot read property 'addLayer' of undefined

1 Answers