4

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?

2
  • 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.
    – evv_gis
    Oct 31, 2014 at 19:36
  • Hi.. I posted the question again with code. Please help. Thank you Nov 3, 2014 at 4:31

2 Answers 2

2

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

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

Your Answer

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

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