title: Using Leaflet and Leaflet.markerclusterer - how to loop all the markers?
body: <p>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:</p>
  
  <pre><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 &amp;copy; &lt;a href="https://www.openstreetmap.org/"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="https://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery © &lt;a href="https://www.mapbox.com/"&gt;Mapbox&lt;/a&gt;',
              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 &gt;= 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");
          }
  
      }
  
  }
  </code></pre>
  
  <p>This all works fine and the map shows ok. The problem I'm having is around this code:</p>
  
  <pre><code>    var shouldBeVisible = mapBounds.contains(m.getLatLng());
  
      if (shouldBeVisible) {
          console.log("This is visible");
  
      } else {
          console.log("This NOT visible");
      }
  </code></pre>
  
  <p>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.</p>
  
  <p>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 :)</p>
  
  <p><a href="https://jsfiddle.net/youradds/g7fd0k5z/1/" rel="nofollow noreferrer">https://jsfiddle.net/youradds/g7fd0k5z/1/</a></p>
  
  <p>Please let me know if you need any more information</p>
  
  <p><strong>UPDATE 2:</strong> I managed to find some code from someone else, doing:</p>
  
  <pre><code>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++;
  });
  </code></pre>
  
  <p>This DOES get the values of each layer, but it doesn't include the current markers inside the clusters. How do you extract that? </p>