Loop through a marker cluster using Leafletjs

Question

I have a variable like this

var cubbon = new L.MarkerClusterGroup()

then i added many markers to this variable. now i like to create a function() and
loop through the variable and find out a marker having latitude value of 12.962.

once i find the marker, i like to use openPopup() method to open popup window on the marker.

i want this loop to run when i click a button.

---

Here is my code process..

Objective: click an 'html' button, so that a marker(having latitude=12.962 & Longitude=77.168) which is within 'marker cluster group'should open its popup automatically.

//create a marker cluster variable with the name 'parks'
var allParks = new L.MarkerClusterGroup({    maxClusterRadius: 20,spiderfyOnMaxZoom: true, showCoverageOnHover: false, zoomToBoundsOnClick: true});
//now i create individual markers and finally add them to 'allParks' variable.
var parkA = L.marker(new L.LatLng(13.234, 76.321);
parkA.bindPopup("Here the parkA");
var parkB = L.marker(new L.LatLng(13.325, 76.675);
parkB.bindPopup("Here the parkB");
var parkC = L.marker(new L.LatLng(12.962, 77.168);
parkC.bindPopup("Here the parkD");

//Now i add all these markers to 'allParks' variable.
allParks.addLayer(parkA);
allParks.addLayer(parkB);
allParks.addLayer(parkC);
// like this i created many park's and finally added to the varaible 'allParks'
//Now, as stated earlier, on a click of a button the following function should fire, which loop through the marker-cluster variable (allParks) and find out the park (having lat=12.962,long=77.168) and open its popup on the map.
//this is where i am trying and failing.i am using the 'eachlayer'method to loop

allParks.eachLayer(function (layer) {
if(((layer.getLatLng().lat)=12.962) && ((layer.getLatLng().lng)=77.168)){
layer.openPopup();
}

});

Can you help me how to loop through that variable and find out only that park satisfying the condition and open its popup on the map?

Answer 1

It might be a late answer but I had the same requirements a few days ago and I couldn't find any decent solution over the internet so I end up making my own which I believe is pretty clean and doesn't go any of the TypeScript rules and regulations.

@Component({
    selector: "client-home",
    templateUrl: "./home.component.html",
    styleUrls: ["./home.component.scss"]
})
export class MyComponent implements OnInit
{
    private _map     : L.Map;           // Assuming you have the map reference here
    private _markers : L.Marker[] = []; // Assuming you have the markers in this array
    private _cluster : L.markerClusterGroup;

    // You might probably have done this somewhere in your code (ngOnInit in my case):

    public ngOnInit()
    {
        this.cluster = L.markerClusterGroup({
            animate : false, // I didn't want the animations so I disabled them    
        });

        this.cluster.addLayers(this._markers);
        this._map.addLayer(this.cluster);
    }

    // This method will find the cluster which has the specific latitude/longitude in its bounds (this was my target)

    public onPropertyObjectMouseEnter(location : { latitude : number, longitude : number })
    {
        // Loop through each layer on the map

        this._map.eachLayer((layer : L.Layer) =>
        { 
            // If the layer is marker cluster object

            if (layer instanceof L.MarkerCluster)
            {
                // "layer" variable is a cluster marker. Do whatever you need here :)

                // Don't need to worry about the bottom code (I did as per my requirement to check if the location includes in this cluster marker or not)

                let clusterHasTheLocation = layer.getBounds().contains({
                    lat : location.latitude,
                    lng : location.longitude
                });

                if (clusterHasTheLocation)
                {
                    layer.getElement().classList.add("highlight");
                    return false; // Exit the .eachLayer loop
                }
            }
        });
    }
}

Answer 2

There is a mistake in your equality tests, you do affectation instead of comparison. Use the triple or double equal, but not the single :

allParks.eachLayer(function (layer) {
    if (    layer.getLatLng().lat === 12.962
         && layer.getLatLng().lng === 77.168
    ){
        layer.openPopup();
}