CODEWITHSUNDEEP
javascriptleafletmapsleaflet.markercluster
Sanaz Baghban
Sanaz Baghban

Reputation: 155

leaflet Uncaught TypeError: Cannot read property 'length' of undefined and markerClusters is not defined

I wrote a code for getting data from server and show it on map. it's been working fine till I changed the map codes to add LayerGroup(). I have my map function in a seperate file named: app.js, clustering function in functions.js. I wanted to use different types of map (layer control). and also, the clustering function should work whenever the "show on map" button is clicked. My map code now:

 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']});

    var map = 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(map);
}

and my function:

function MarkerOnMap(ODO) {

for ( var i = 0; i < ODO.length ; i++ ){
    console.log(ODO);
    var popup = 
                '<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 marker= L.marker( [ODO[i].LastX, ODO[i].LastY] )
                    .bindPopup( popup );

    markerClusters.addLayer( marker);
}
/*Legend specific*/
    var legend = L.control({ position: "bottomright" });

    legend.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)#E6E696"></i><span>پر مصرف</span><br>';
    return div;
    };

    legend.addTo(map);

Init_Map ();

}

and called the map function in this clustering:

    Init_Map ();

can anyone tell me why I'm recieving this error suddenly?

the data in ODO is something like this:

var BillingDate = [
          {"branchcode":"668",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.649717",
          "LastY":"52.488193",
          "flag":"1",
          "flag_Title":null
          },
          {
            "branchcode":"669",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.712585",
          "LastY":"52.935543",
          "flag":"1",
          "flag_Title":null
          }
        ];

It could be read from server and showed me the clustered markers before I change map code to what it is right now. the old code for map is:

var 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);

in app.js , I have another function to recieve data from server and pass it to MarkerOnMap();:

var OMID_Detail_Object;
function OMID_Detail() {

  var Ajax_URL= Server_IP +'/OHM/Get_Billing_OMID_Detail';
  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;
  },function (er){},"json");
}
function CreateMarkers(){
  OMID_Detail();
  MarkerOnMap(OMID_Detail_Object);
}

the data ODO is read clearly. I checked it with console.log

Upvotes: 0

Views: 774

Answers (1)

Amaarockz
Amaarockz

Reputation: 4684

var OMID_Detail_Object;
function OMID_Detail() {

var Ajax_URL= Server_IP +'/OHM/Get_Billing_OMID_Detail';
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();
}

Above is the code with slight modification, another way of doing this is using async-await The ultimate aim to make your MarkerOnMap function to wait untill the previous function is fully executed.

Upvotes: 1

Related Questions