Getting duplicated markers on each cluster with Leaflet and Markercluster.

Question

I'm building and app with Leaflet and Markercluster.

As of now, I manage to get the markers in the MarkerClusterGroup, but they appear duplicated in the map, and each one of them in a different cluster group (¿?).

This is the code so far:

var cluster = new L.MarkerClusterGroup();

if (!viewingAllRoutes) {

    var popupMain = L.popup(
        {
            closeButton : false,
            className : 'expat-detail'   
        }
    )
    .setLatLng([latitude, longitude])
    .setContent("TEST")
    .openOn(map);

    if (finalLocation) {
        gpstrackerMarker = new L.marker(new L.LatLng(latitude, longitude), {title: title, icon: markerIcon, zIndexOffset: 999}).bindPopup(popupMain).addTo(map);
    } else {
        gpstrackerMarker = new L.marker(new L.LatLng(latitude, longitude), {title: title, icon: markerIcon}).bindPopup(popupWindowText).addTo(map);
    }
}

if (viewingAllRoutes) {

    var popup = L.popup(
        {
            closeButton : false,
            className : 'expat'   
        }
    )
    .setLatLng([latitude, longitude])
    .setContent(userName)
    .addTo(cluster);

    gpstrackerMarker = new L.marker(new L.LatLng(latitude, longitude), {title: title, icon: markerIcon, zIndexOffset: 999}).bindPopup(popup).addTo(cluster);

    map.addLayer(cluster);

    gpstrackerMarker.on("click", function() {        
        var url = 'getrouteformap.php?sessionid=' + sessionID;

        viewingAllRoutes = false;

        var indexOfRouteInRouteSelectDropdwon = sessionIDArray.indexOf(sessionID) + 1;
        routeSelect.selectedIndex = indexOfRouteInRouteSelectDropdwon;

        if (autoRefresh) {
            restartInterval(); 
        }

        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                loadGPSLocations(data);
            },
            error: function (xhr, status, errorThrown) {
                console.log("status: " + xhr.status);
                console.log("errorThrown: " + errorThrown);
            }
         });
    }); // on click
} 

This is how it looks like:

These 2 groups are actually only 2 markers:

And then, when clicking in each of them:

What am I missing??

Answer 1

Do not add the pop-up to the cluster layer. It will already be added to the map while being binded to a marker.

Try to remove the line where you add it and see if it works.

var popup = L.popup(
    {
        closeButton : false,
        className : 'expat'   
    }
)
.setLatLng([latitude, longitude])
.setContent(userName);