How to Remove Markers from Marker Cluster on new Ajax Call?

[Wondimagegn Tesfaye]

I couldn't get a good way to hide or remove markers on new ajax call with Marker clustering. I used jquery hide(); function to hide marker images. 

So when marker cluster groups and shows markers, previously hidden markers becomes visible. Meaning, markers that were previously searched and hidden becomes visible. 

Is there a way to hide markers from marker clusters on new ajax load?

demo -  http://projects.tsa.co.ke/marsabit/

To reproduce:

1. Make a search on hospitals, then uncheck health and search security. 

2. Then zoom in and out to group and un-group markers with cluster. Health markers previously searched hospitals are visible. 

The code. 

$(document).ready(function(){

    $("#viewbtn").on("click",function(){

        $.ajax({

            type: 'POST',

            dataType: "json",

            url:'scripts/queries.php',

            data:$('#mapsearch').serializeArray(),

            beforeSend:function() {

                $('img.leaflet-marker-icon.leaflet-zoom-animated.leaflet-clickable').fadeOut('slow');

                $('.marker-cluster').fadeOut('slow');

                $('<img class="loading" src="images/loading.gif">').appendTo("#rangeserch").fadeIn("slow");

                

                $('.leaflet-marker-icon').hide();

            },

            success:function(data){

                $('.loading').fadeOut('slow'); 

                drawpoints(data); 

            }

        })// end of ajax

    });

    function drawpoints(data){

        var LeafIcon = L.Icon.extend({

          options: {

               iconSize:     [32, 37],

               shadowSize:   [50, 64],

               shadowAnchor: [4, 62],

               popupAnchor:  [0, -20]

          }

        });

         var hosicon= new LeafIcon({iconUrl: 'images/hospital.png'}), 

             secicon= new LeafIcon({iconUrl: 'images/security.png'}); 

        if($("#hospitals").prop('checked') == true){ 

            var hospitalPoints = [];

            for (var i = 0; i < data['hospitals'].length; i++) {

              hospitalPoints[i] = [data['hospitals'][i].lat, data['hospitals'][i].lon];

            } 

            var markers = new L.markerClusterGroup({ 

              disableClusteringAtZoom: 14, 

              animateAddingMarkers: true, 

              spiderfyDistanceMultiplier: true

            });

            for (var i = 0; i < hospitalPoints.length; i++) {

              var a = hospitalPoints[i];

              var title = a[2];

              var marker = L.marker(new L.LatLng(a[0], a[1]), {icon: hosicon}).addTo(map).bindPopup('<div><h6>'+data['hospitals'][i].name+'</h6><br/>'+"<form method='post' action='' id='dbdetail'><input type='hidden' name='health' value='marsabit_health;"+data['hospitals'][i].id+"' id='hosp'></form></div>"); 

              markers.addLayer(marker);

              map.addLayer(markers);     

            }

        }

        if($("#security").prop('checked') == true){ 

            var securityPoints = [];

            for (var i = 0; i < data['security'].length; i++) {

              securityPoints[i] = [data['security'][i].lat, data['security'][i].lon];

            } 

            var markers = new L.markerClusterGroup({ 

              disableClusteringAtZoom: 14, 

              animateAddingMarkers: true, 

              spiderfyDistanceMultiplier: true

            });

            for (var i = 0; i < securityPoints.length; i++) {

              var a = securityPoints[i];

              var title = a[2];

              var marker = L.marker(new L.LatLng(a[0], a[1]), {icon: secicon}).addTo(map).bindPopup('<div><h6>'+data['security'][i].name+'</h6><br/>'+"<form method='post' action='' id='dbdetail'><input type='hidden' name='security' value='marsabit_security;"+data['security'][i].id+"' id='sec'></form></div>"); 

              markers.addLayer(marker);

              map.addLayer(markers);           

            }

        }

    }

Thank you in advance, it is urgently need. Your input is appreciated.  

[Per Liedman]

Hi,

in general, try to avoid using jQuery to control DOM elements managed by or created by Leaflet, since it's quite likely they will end up setting conflicting states.

There's no special API to hide or show markers in Leaflet, as you have noticed. Instead, you have to add or remove the markers from the layer or map in question. In particular, this is important when working with plugins like markercluster, since there's not way for the plugin to know what markers you have hidden with jQuery. Instead, use addLayer, removeLayer or clearLayers to show and hide your markers (https://github.com/Leaflet/Leaflet.markercluster#adding-and-removing-markers).

Regards,

Per

[Wondimagegn Tesfaye]

Thank you for the explanation Per. As shown in the code, there is addLayer but removeLayer or clearlayer didn't work. My question is where to put it so that the markercluster knows it?