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?

• evv_gis: Do you have any proof of concept or example code to show us where you are so far? What phase of the above workflow are you having trouble with? For starters, this post shows how you can get the lat/lng properties of the markers: stackoverflow.com/questions/22602287/… With that, you're more than halfway there.
• user2637505: Hi.. I posted the question again with code. Please help. Thank you

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();
}