javascript - Clear Marker Layers (Leaflet )

Question

I am using Leaflet library and stuck with following issue: To generate Map i am calling map function on button click. So on each generatemap function call, I want to clear pregenerated markers.

function generatefilterrecord(orgid,defservice,defavail,defowner,defhealthfacility) {

    $("#content1").hide();
    $("#map1").show();

    $("#mapA1").hide();
    $("#footer").hide();
    jQuery('#sel').html('');
    $(".w3-card-4").remove();


    var addressjoin=[],ouid=[],availspecialitiesjoin,availspecialities=[],avaialabilityjoin,name=[],address=[],pincode=[],village=[],mobile=[],special=[],notspecial=[],hfacilities=[],nothfacilities=[],schemes=[],notschemes=[],contactpname=[],contactpnumber=[];
    var toAdd,spec=[],email=[],specialjoin,notspecialjoin,notspec=[],owner=[],notowner=[],hfacilitiesjoin,nothfacilitiesjoin,schemesjoin,notschemesjoin,hfschemes=[],nothfschemes=[];
    var healthfac="",ownership=[],availspecialiti=[];
    var arrayMap = [];latitude=[];longitude=[];


    $.getJSON("../../api/analytics/events/query/tzR46QRZ6FJ.json?stage=o6ps51YxGNb&dimension=pe:THIS_YEAR&dimension=ou:"+orgid+"&dimension=l8VDWUvIHmv&dimension=KOhqEw0UKxA&dimension=xjJR4dTmn4p&dimension=wcmHow1kcBi&dimension=pqVIj8NyTXb&dimension=g7vyRbNim1K&dimension=Gx4VSNet1dC&dimension=bUg8a8bAvJs&dimension="+defservice+"&dimension="+defavail+"&dimension="+defowner+"&dimension="+defhealthfacility+"&dimension=ZUbPsfW6y0C&dimension=CAOM6riDtfU&dimension=YL7OJoQCAmF&dimension=vJO1Jac84Ar&dimension=kF8ZJYe9SJZ&dimension=tNhLX6c7KHp&dimension=bVENUe0eDsO&displayProperty=NAME", function (data) {
        console.log("../../api/analytics/events/query/tzR46QRZ6FJ.json?stage=o6ps51YxGNb&dimension=pe:THIS_YEAR&dimension=ou:"+orgid+"&dimension=l8VDWUvIHmv&dimension=KOhqEw0UKxA&dimension=xjJR4dTmn4p&dimension=wcmHow1kcBi&dimension=pqVIj8NyTXb&dimension=g7vyRbNim1K&dimension=Gx4VSNet1dC&dimension=bUg8a8bAvJs&dimension="+defservice+"&dimension="+defowner+"&dimension="+defhealthfacility+"&dimension=jXCd8k2841l&dimension=RkP5neDLbHv&dimension=avHST8wLPnX&dimension=txl9e6UJFP4&dimension=ZUbPsfW6y0C&dimension=CAOM6riDtfU&dimension=YL7OJoQCAmF&dimension=vJO1Jac84Ar&dimension=kF8ZJYe9SJZ&dimension=tNhLX6c7KHp&dimension=bVENUe0eDsO&displayProperty=NAME");
        var constants={key:name, value: value}

        analyticsMap = calculateIndex(data.headers,analyticsMap);

        if(data.rows.length==0)
        {
            alert("No result found for above selection");
        }
        for(var k=0;k<data.rows.length;k++){

            arrayMap["special"] = special;
            arrayMap["name"] = name;
            arrayMap["address"] = addressjoin;
            arrayMap["pincode"] = pincode;
            arrayMap["village"] = village;
            arrayMap["mobile"] = mobile;
            arrayMap["notspecial"] = notspecial;
            arrayMap["hfacilities"] = hfacilities;
            arrayMap["nothfacilities"] = nothfacilities;
            arrayMap["schemes"] = schemes;
            arrayMap["notschemes"] = notschemes;
            arrayMap["contactpname"] = contactpname;
            arrayMap["contactpnumber"] = contactpnumber;
            arrayMap["availspecialities"] = availspecialities;
            arrayMap["ownership"] = ownership;
            arrayMap["ouid"] = ouid;

            for (var j=0;j<analyticsMap.length;j++){

                if (analyticsMap[j].index > 0){
                    var value = data.rows[k][analyticsMap[j].index];
                    if (value == "1"){
                        value = data.headers[analyticsMap[j].index].column;
                    }

                    if (!value || value == "0"){
                        value = "";
                    }
                    if(arrayMap[analyticsMap[j].arrayName]){
                        arrayMap[analyticsMap[j].arrayName].push(value);
                    }
                }
            }
            specialjoin = myJoin(special);
            availspecialitiesjoin = myJoin(availspecialities);
            notspecialjoin = myJoin(notspecial);
            hfacilitiesjoin = myJoin(hfacilities);
            nothfacilitiesjoin = myJoin(nothfacilities);
            schemesjoin = myJoin(schemes);
            notschemesjoin = myJoin(notschemes);

            spec.push(specialjoin);
            notspec.push(notspecialjoin);
            owner.push(hfacilitiesjoin);
            availspecialiti.push(availspecialitiesjoin);
            notowner.push(nothfacilitiesjoin);
            hfschemes.push(schemesjoin);
            nothfschemes.push(notschemesjoin);


            availspecialities=[];
            special = [];
            notspecial = [];
            hfacilities = [];
            nothfacilities = [];
            schemes = [];
            notschemes = [];




        }
        var header = {
            "Authorization": "Basic " + btoa( "homepage" + ':' + "Homepage123@123" )
        };
        for (var i = 0; i < name.length; i++) {
            $.ajax({
                async: false,
                type: "GET",
                dataType: "json",
                contentType: "application/json",
                header: header,
                url: '../../api/organisationUnits/' + ouid[i] + '.json?fields=[id,name,coordinates]',
                success: function (response) {
                    var coordinates = JSON.parse(response.coordinates);
                    latitude.push(coordinates[0]);
                    longitude.push(coordinates[1]);


                },
                error: function (response) {

                }
            });
        }

        for (var i = 0; i < name.length; i++) {
            if(ownership[i]=="Public")
            {
                L.marker([longitude[i], latitude[i]], {icon: blueMarker}).addTo(map1).bindPopup(name[i]+","+"</br><strong>Contact:</strong> "+  mobile[i]+ ",</br> <strong>Schemes:</strong>"+hfschemes[i]+", </br><strong>Availabilities:</strong> "+availspecialiti[i]).openPopup();
            }
            else if(ownership[i]=="Private")
            {
                L.marker([longitude[i], latitude[i]], {icon: redMarker}).addTo(map1).bindPopup(name[i]).openPopup();
            }


        }

    });

}

Answer 1

Instead of adding the markers directly to your map, add them to a L.LayerGroup

Whenever you want, you can remove your markers calling the clearLayers method

var layerGroup = L.layerGroup().addTo(map);

// create markers
L.marker().addTo(layerGroup);

// remove all the markers in one go
layerGroup.clearLayers();