Using Leaflet and Leaflet.markerclusterer - how to loop all the markers?

Question

I'm trying to move away from Google Maps, as I'm fed up with how crappy slow they are now! I've decided to give Leaflet a go, and it seems like a good option. Below is my code:

initMap();

function initMap() {


    window.VARS.Map_Modal = L.map('google_map_modal_inner', {
                  center: [window.VARS.lat,window.VARS.lng],
                  zoom: 10,
                  maxZoom: 20,
                  zoomControl: false
                });

    new L.Control.Zoom({ position: 'topright' }).addTo(window.VARS.Map_Modal);

    setTimeout(function() {

        window.VARS.Map_Modal.invalidateSize();// stop the grey tiles due to being a flex div

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: 'xxx'
        }).addTo(window.VARS.Map_Modal);
    }, 500);

    getMarkers();


}

function getMarkers() {

    var extra_params = get_extra_params();
        extra_params["action"] = "load_results_cat";
        // other params pass in

    var the_url = '/cgi-bin/links/ajax.cgi';
    reqwest({
            url: the_url,
            type: 'json',
            method: 'post',
            data: extra_params,
            // timeout: 10000,
            error: function (err) {
                alert("ERROR");
             },
            success: function (data) {

                window.VARS.markers = []; // empty
                window.VARS.marker_vals = []; // empty

                window.VARS.markerCluster = L.markerClusterGroup();

                data.markers.forEach(function(item, i){

                        window.VARS.markerCluster.addLayer(
                                L.marker([item.latitude, item.longitude])
                                .on("click", function(marker) {
                                    console.dir(marker);
                                })
                        );


                });

                window.VARS.Map_Modal.addLayer(window.VARS.markers);

            }
        });

}


function update_bottom_bar_visible() {


    var mapBounds = window.VARS.Map_Modal.getBounds();
    for (var i = window.VARS.markers.length -1; i >= 0; i--) {

        var m = window.VARS.markers[i];

        var shouldBeVisible = mapBounds.contains(m.getLatLng());

        if (shouldBeVisible) {
            console.log("This is visible");

        } else {
            console.log("This NOT visible");
        }

    }

}

This all works fine and the map shows ok. The problem I'm having is around this code:

    var shouldBeVisible = mapBounds.contains(m.getLatLng());

    if (shouldBeVisible) {
        console.log("This is visible");

    } else {
        console.log("This NOT visible");
    }

I can't get it to loop through the markers. What I need to do is go through all of the markers that are visible, and then show them in my bar below. I've taken out the guts of this script as its quite long - but this should hopefully be enough.

Here is a working example with the cluster tool, BUT it doesn't select the current markers in the viewport. This is the bit I need help with :)

https://jsfiddle.net/youradds/g7fd0k5z/1/

Please let me know if you need any more information

UPDATE 2: I managed to find some code from someone else, doing:

var i = 0;

window.VARS.markerCluster.eachLayer(function (layer) {
    var lat = layer.getLatLng().lat;
    var lng = layer.getLatLng().lng;
    console.dir("marker number("+i+"):"+lat+","+lng);
    //array.push({name:location,lat:lat,lng:lng});
    i++;
});

This DOES get the values of each layer, but it doesn't include the current markers inside the clusters. How do you extract that?

Answer 1

OK so I worked it out:

window.VARS.markerCluster.eachLayer(function (layer) {
    var lat = layer.getLatLng().lat;
    var lng = layer.getLatLng().lng;

    var shouldBeVisible = mapBounds.contains([lat,lng]);

    if (shouldBeVisible) {
        console.log("This is visible");
    } else {
        console.log("This NOT visible");

    }
});