Leaflet marker cluster demo

with Layer Support not using addLayers…

by Alex Azuero

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster-src.js"></script>
<script src="https://leaflet.github.io/Leaflet.markercluster/example/realworld.50000.1.js"></script>
<script src="https://leaflet.github.io/Leaflet.markercluster/example/realworld.50000.2.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.layersupport-src.js"></script>
<div id="progress">
  <div id="progress-bar"></div>
</div>
<div id="map"></div>

CSS

#map {
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
}

#progress {
  display: none;
  position: absolute;
  z-index: 1000;
  left: 400px;
  top: 300px;
  width: 200px;
  height: 20px;
  margin-top: -20px;
  margin-left: -100px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  padding: 2px;
}

#progress-bar {
  width: 0;
  height: 100%;
  background-color: #76A6FC;
  border-radius: 4px;
}

JavaScript

L.MarkerClusterGroup.include({
  addLayers: function(layersArray, skipLayerAddEvent) {
    if (!L.Util.isArray(layersArray)) {
      return this.addLayer(layersArray);
    }

    var fg = this._featureGroup,
      npg = this._nonPointGroup,
      chunked = this.options.chunkedLoading,
      chunkInterval = this.options.chunkInterval,
      chunkProgress = this.options.chunkProgress,
      l = layersArray.length,
      offset = 0,
      originalArray = true,
      m;

    if (this._map) {
      var started = (new Date()).getTime();
      var process = L.bind(function() {
        var start = (new Date()).getTime();
        for (; offset < l; offset++) {
          if (chunked && offset % 200 === 0) {
          	console.log("chunk: " + offset);
            // every couple hundred markers, instrument the time elapsed since processing started:
            var elapsed = (new Date()).getTime() - start;
            if (elapsed > chunkInterval) {
            	console.log("break: " + elapsed + " / " + chunkInterval);
              break; // been working too hard, time to take a break :-)
            }
          }

          m = layersArray[offset];

          // Group of layers, append children to layersArray and skip.
          // Side effects:
          // - Total increases, so chunkProgress ratio jumps backward.
          // - Groups are not included in this group, only their non-group child layers (hasLayer).
          // Changing array length while looping does not affect performance in current browsers:
          // http://jsperf.com/for-loop-changing-length/6
          if (m instanceof L.LayerGroup) {
            if (originalArray) {
              layersArray = layersArray.slice();
              originalArray = false;
            }
            this._extractNonGroupLayers(m, layersArray);
            l = layersArray.length;
            continue;
          }

          //Not point data, can't be clustered
          if (!m.getLatLng) {
            npg.addLayer(m);
     ...