2

I am having a weird issue with removing a MarkerClusterGroup layer from the map. When at a zoom level more than 5, I want to show markers on the map in a MarkerClusterGroup layer. When zoomed to less than level 5, I want to remove the markers.

Given the code below, most of the markers remove, but a small cluster of markers in the center of the map stubbornly remains (all the markers and clusters are in the same FeatureGroup).

const LAYERS = {};
const BOUNDS = null;

const makeFoo = async (bounds) => {
    // get points for `bounds` from the server
    const url = `server/?bounds`;
    const response = await fetch(url);

    if (response.ok) {
        LAYERS.foo = L.markerClusterGroup();
        const records = await response.json();
        records.forEach((r) => LAYERS.foo.addLayer(L.marker(new L.LatLng(r.lat, r.lng)));
        map.addLayer(LAYERS.foo);
    }
}

const map = L.map( 'map', {});
map.on('moveend', function(e) {    
    if (map.getZoom() > 5) {
        if (BOUNDS) {
            if (map.bounds.contains(BOUNDS)) {
                if (!map.hasLayer(LAYERS.foo)) makeFoo(map.getBounds());
            }
            else {
                BOUNDS = map.getBounds();
                makeFoo(BOUNDS);
            }
        }
        else {
            BOUNDS = map.getBounds();
            makeFoo(BOUNDS);
        }
    }
    else if (zoom <= 5) {
        if (map.hasLayer(LAYERS.foo)) map.removeLayer(LAYERS.foo);
    }
});

When I type the following in the browser console, no layer is found, but I can see the points.

>> map.hasLayer(LAYERS.foo)
← false

What is going on? How can I get rid of these ghost marker clusters?

2
  • Please edit your question and explain a bit more about the logic of your code, don't let people guess what you are trying to do.
    – TomazicM
    Jan 15, 2022 at 19:14
  • well, I thought it was pretty clear from the code, but I've added another sentence describing what I am trying to do. I hope it is clearer now. Thanks.
    – punkish
    Jan 15, 2022 at 19:23

1 Answer 1

3

Without actually testing I would say that what's missing is removing possible existing marker cluster layer when creating a new one.

So probably the code should be something like:

const makeFoo = async (bounds) => {
    // get points for `bounds` from the server
    const url = `server/?bounds`;
    const response = await fetch(url);

    if (response.ok) {
        if (LAYERS.foo && map.hasLayer(LAYERS.foo)) {
          map.removeLayer(LAYERS.foo);
        }
        LAYERS.foo = L.markerClusterGroup();
        const records = await response.json();
        records.forEach((r) => LAYERS.foo.addLayer(L.marker(new L.LatLng(r.lat, r.lng)));
        map.addLayer(LAYERS.foo);
    }
}
1
  • You set me on the right path… instead of checking for and adding to the existing markercluster layer, I was creating new layers but not assigning them to anything. That is why I was not able to remove them. Thanks
    – punkish
    Jan 15, 2022 at 20:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.