CODEWITHSUNDEEP
javascriptleafletmarkersleaflet.markercluster
KidfromCov
KidfromCov

Reputation: 33

Cannot remove layer or clear all layers on leaflet with markercluster?

I am having a problem permanently removing layers or markers with leaflet marker cluster.

I can remove remove the marker and edit its CSS via its DIV ID fine. When I do it this way and delete the array, the marker does disappear and the array is deleted but when I zoom out and back in, the marker is still there? Even though the number is the cluster is down by one?

I have tried

layer.removeFrom(markerLayer);

But it says markerLayer undefined.

This deletes all markers but when zoomed in and out they are back again?

$(".leaflet-marker-icon").remove(); $(".leaflet-popup").remove();

Am I missing something here with the clusters?

I add the map markers to the cluster like so, maybe this is wrong?

The Map :-

var map = L.mapbox.map('map')
      .setView([52.450439, -1.729660], 14)
      .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
      
 var markerLayer = L.layerGroup().addTo(map);

Then to Add markers I use :-

var markers = new L.MarkerClusterGroup();
//console.log(pointsForMarker);
// Add people to the map:
var status;
var username;
pointsForMarker.forEach((point) => {

username = point.name;
status = point.status;

    var client = L.divIcon({
        className: 'location-pin',          
        html: '<img id="operatorimg" src="img/'+point.name+'.jpg"><div id='+username+' class="pin '+status+'"></div>',
        iconSize: [60, 60],
        iconAnchor: [20, 66]});

        //alert (point.name);
        var marker = L.marker ([point.lat, point.lng], {
            icon: client
        });
        
        markers.addLayer(marker);
        marker.name = point.name;
        status = point.status;
        var username = point.name;      
        marker.bindPopup(username + ' is online now and available');
    

map.addLayer(markers);

My data is saved and loaded like so :-

const pointsForMarker = [
  { name: 'SAM', lat: 52.4734975, lng: -1.4911260, ID: 100102, status: 'offline'}
]

Upvotes: 1

Views: 1345

Answers (1)

ghybs
ghybs

Reputation: 53290

If you want to remove all your Markers from the Marker Cluster Group, simply use its clearLayers() method:

markers.clearLayers();

Using jQuery will only temporarily remove the currently visible Markers, and they will be added back automatically by Leaflet.markercluster when panning / zooming.

Upvotes: 1

Related Questions