Trigger openPopup() on clustered markers

Hi, I have every marker added to the markerclusterer markers also added to an object markersList = {} Each marker added also creates a row in a sidebar, such that when a user clicks on a row, the marker corresponding to that row will openPopup().

Problem: Without adding the markers to markercluster, the markers will openPopup() when its row in the Sidebar is clicked. However if these markers were to be added to markerclusterer, openPopup() does nothing. this.model.id is an id unique to each marker, retrieved from a backbone.js model this.model.

Is there currently a way to achieve this with the markers added to markerclusterer? Thank you so much!! 😃

A loop creates all the markers required

// Create marker
var marker = new L.marker(
    new L.LatLng( this.model.get('lat'), this.model.get('lng') ));
var content = this.templatePopup( this.model.toJSON() );
marker.bindPopup(content);

// Popup does not open if added to marker clusterer
//markers.addLayer(marker);

// Popup works when added to map
marker.addTo(map);

// Add to list of markers
markersList[this.model.id] = marker;

When a row in the sidebar is clicked…

// Opens the marker's popup when row in Sidebar is clicked
$('row').click(function() {
    markersList[this.model.id].openPopup();
})

[telardil]

openMarkerPopup: function() {
    var marker = markersList[this.model.id];
    if (!marker._icon) marker.__parent.spiderfy();
    marker.openPopup();
}

[dannychua]

Thanks for the suggestion, I tried your second suggestion:

openMarkerPopup: function() {
    var marker = markersList[this.model.id];

    // Add marker to map and open popup
    marker
        .addTo(map)
        .openPopup();

    // On closing popup, remove marker from map
    map.on('popupclose', function() {
        console.log('popupclose');
        map.removeLayer(marker);
    });
},

If I click on the first .row, then click on map, then on the second .row, then on map, the markers and popup appears correctly, and closes correctly.

Problem 1: If I click on the first .row, (first popup opens) then on the second .row, the first marker and its popup disappears (as expected) and popup for the second marker shows up, but not the second marker.

Problem 2: For the above scenarios, the markers whose rows are clicked on are within clusters. If a marker not in any cluster has its .row clicked, and then the map is clicked to close the popup, the marker vanishes as well.

Problem 3: In all cases, the number of popupclose even listeners starts increasing with each opening of popups, which can be observed by the increasing number of console.log lines. map.removeListener('popupclose') results in an error Uncaught TypeError: Object [object Object] has no method 'removeListener'

I guess the first suggestion could be better? I’l need to figure out how to transfer the popup content from the first marker to the new popup.