CODEWITHSUNDEEP
javascriptleafletleaflet.markercluster
Neelotpal
Neelotpal

Reputation: 347

leaflet markercluster open popup on load

I have the following code in my application and all markers are added to one group.I want the marker popups which are not collapsed in the cluster to show popup on them when the map is loaded. (markers which are part of the cluster but not collapsed into cluster on a particular zoom level, when the map is loaded at that zoom level)

var markers = [{
         "latLong": [57.67, -3.89]
        },
     {
         "latLong": [-4.4, -58.34]
        },
     {
         "latLong": [35.79, 139.48]
        }],
 markerGroup = L.markerClusterGroup(),
 marker;

markers.forEach(function (markerConfig, index) {

 marker = new L.Marker(new L.LatLng(markerConfig.latLong[0], markerConfig.latLong[1]));
 marker.bindPopup(index, {
     "autoClose": false,
     "closeOnClick": false
 }).openPopup();
 markerGroup.addLayer(marker);
});

clusterMap.addLayer(markerGroup);

I want the openPopup() method on marker, to open the popup when map is loaded, it opens when marker is clicked. Please help.

Upvotes: 1

Views: 1737

Answers (1)

Neelotpal
Neelotpal

Reputation: 347

I found a solution to this, the trick was to add the cluster group to the map first and then add the markers to the group and then call openPopup on the markers. So it was just a matter of sequence of calling the functions.

var markers = [{
            "latLong": [57.67, -3.89]
            },
        {
            "latLong": [-4.4, -58.34]
            },
        {
            "latLong": [35.79, 139.48]
        }],
    markerGroup = L.markerClusterGroup(),
    marker;
clusterMap.addLayer(markerGroup);

markers.forEach(function (markerConfig, index) {
    marker = new L.Marker(new L.LatLng(markerConfig.latLong[0], markerConfig.latLong[1]));
    markerGroup.addLayer(marker);
    marker.bindPopup(index, {
        "autoClose": false,
        "closeOnClick": flase
    }).openPopup();
});

Upvotes: 0

Related Questions