leaflet Uncaught TypeError: map.addLayer is not a function

Question

I've made a function for clustering my json data on map like this: it's located in a js file called functions.js

function(ODO)    
var markerClusters = L.markerClusterGroup();
    for ( var i = 0; i < ODO.length ; i++ )
    {
        var popup = ODO[i].branchcode +
                "<br/><b>کد رشته :</b> " +
                ODO[i].branchcode +
                "<br/><b>دوره:</b> " +
                ODO[i].saleprd +
                "<br/><b>سال :</b> " +
                ODO[i].saleyear +
                "<br/><b>موقعیت مکانی:</b> " +
                ODO[i].LastX +
                "" +
                "-" +
                "" +
                ODO[i].LastY +
                "<br/><b>فلگ :</b> " +
                ODO[i].flag;
        var mainMap = L.marker( [ODO[i].LastX, ODO[i].LastY] )
                        .bindPopup( popup );
        markerClusters.addLayer( mainMap );
    }
    
    mainMap.addLayer( markerClusters );
    markerClusterLayer = L.markerClusterGroup({
        disableClusteringAtZoom: 13
    }).addTo(mainMap);
}

and then, initialized a map with defferent layers and a legend in app.js:

function Init_Map()
{
    var cities = L.layerGroup();
  
    var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
  
    var satellite   = L.tileLayer(mbUrl, {id: 'mapbox/satellite-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
        streets  = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
        Defaultmap = 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>'}),
        googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
            maxZoom: 20,
            subdomains:['mt0','mt1','mt2','mt3']}),
        googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
            maxZoom: 20,
            subdomains:['mt0','mt1','mt2','mt3']}),
        googleTerrain = L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',{
            maxZoom: 20,
            subdomains:['mt0','mt1','mt2','mt3']});

    window.mainMap = L.map('map', {
      center: [36.564012,53.060300],
      zoom: 8,
      layers: [satellite, cities, Defaultmap , googleHybrid , googleSat , googleTerrain]
    });
    var baseLayers = {
      "نقشه ماهواره ای(گوگل)": googleSat,
      "نقشه هیبریدی": googleHybrid,
      "نقشه ماهواره ای(OSM)": satellite,
      "Streets": streets,
      "نقشه اصلی": Defaultmap,
      "نقشه Terrain": googleTerrain
    };
  
    var overlays = {
      "Cities": cities
    };
  
    L.control.layers(baseLayers, overlays).addTo(mainMap);
    L.Control.Consumption = L.Control.extend({
        onAdd: function(map) {
            var div = L.DomUtil.create("div", "legend");
            div.innerHTML += "<h4>Tegnforklaring</h4>";
            div.innerHTML +=
            '<i style="background: rgba(110, 204, 57, 0.6)"></i><span>خوش مصرف</span><br>';
            div.innerHTML +=
            '<i style="background: rgba(240, 194, 12, 0.6)"></i><span>کم مصرف</span><br>';
            div.innerHTML +=
            '<i style="background: rgba(241, 128, 23, 0.6)"></i><span>پر مصرف</span><br>';
            return div;
        },
        onRemove: function(map) {}
    });
    
    L.control.consumption = function(opts) {
        return new L.Control.Consumption(opts);
    }
    L.control.consumption({ position: 'bottomright' }).addTo(mainMap);
}

and I'm calling data from server like this:

var OMID_Detail_Object;
function OMID_Detail() {

  var Ajax_URL= Server_IP +'/OHM';
  var Year_Val = GetSelectValue("YearSelect");
  var Prd_Val = GetSelectValue("PrdSelect");
  var Flg_Val = GetSelectValue("flags");

  
  app.request.get(Ajax_URL, { "Token": Token_Data, "SaleYear":Year_Val, "SalePrd":Prd_Val, "Flag":Flg_Val }, function (data)
  {
    OMID_Detail_Object=data;
    MarkerOnMap(OMID_Detail_Object);
  },function (er){},"json");
}
function CreateMarkers(){
  OMID_Detail();
}

I named the default map mainMap when I encountered an error for legend. but now, the function for clustering markers have an error like:

Uncaught TypeError: mainMap.addLayer is not a function
at MarkerOnMap (functions.js:46)
at Object.success (app.js:213)
at i (0:4002)
at XMLHttpRequest.Request.f.onload (0:4179)

and is talking about an error in this part:

    mainMap.addLayer( markerClusters );

but why? I tried saying

    map.addLayer( markerClusters );

but it didn't work,too. had the same error! can anyone help with this?

Answer 1

Use window.mainMap everywhere instead of mainMap