nicolas/librenms
1
0
Fork 0
mirror of https://github.com/stylersnico/librenms.git synced 2026-07-27 08:02:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #294 from mindplay-dk/better-loading

Browse Source 
Better loading
This commit is contained in:
Dave Leaver
2014-01-20 13:23:36 -08:00
parent c1d4a88728 a718530e12
commit cb5662ec58
3 changed files with 69 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/marker-clustering-realworld.50000.html
+19 -2
View File
@@ -18,6 +18,7 @@
</head>
<body>
<div id="progress"><div id="progress-bar"></div></div>
<div id="map"></div>
<span>Mouse over a cluster to see the bounds of its children and click a cluster to zoom to those bounds</span>
<script type="text/javascript">
@@ -28,12 +29,28 @@
var map = L.map('map', { center: latlng, zoom: 13, layers: [cloudmade] });
var markers = L.markerClusterGroup({ chunkedLoading: true });
var progress = document.getElementById('progress');
var progressBar = document.getElementById('progress-bar');
function updateProgressBar(processed, total, elapsed, layersArray) {
if (elapsed > 1000) {
// if it takes more than a second to load, display the progress bar:
progress.style.display = 'block';
progressBar.style.width = Math.round(processed/total*100) + '%';
}
if (processed === total) {
// all markers processed - hide the progress bar:
progress.style.display = 'none';
}
}
var markers = L.markerClusterGroup({ chunkedLoading: true, chunkProgress: updateProgressBar });
var markerList = [];
//console.log('start creating markers: ' + window.performance.now());
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
example/screen.css
+24 -1
View File
@@ -2,4 +2,27 @@
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;
}
src/MarkerClusterGroup.js
+26 -11
View File
@@ -27,9 +27,11 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
//Increase to increase the distance away that spiderfied markers appear from the center
spiderfyDistanceMultiplier: 1,
//When bulk adding layers, runs chunks at a time. Means addLayers may not add all the layers in the call, others will be loaded during setTimeouts
// When bulk adding layers, adds markers in chunks. Means addLayers may not add all the layers in the call, others will be loaded during setTimeouts
chunkedLoading: false,
chunkSize: 500,
chunkInterval: 200, // process markers for a maximum of ~ n milliseconds (then trigger the chunkProgress callback)
chunkDelay: 50, // at the end of each interval, give n milliseconds back to system/browser
chunkProgress: null, // progress callback: function(processed, total, elapsed) (e.g. for a progress indicator)
//Options to pass to the L.Polygon constructor
polygonOptions: {}
@@ -159,15 +161,25 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
addLayers: function (layersArray) {
var fg = this._featureGroup,
npg = this._nonPointGroup,
chunkSize = this.options.chunkSize,
chunkInterval = this.options.chunkInterval,
chunkProgress = this.options.chunkProgress,
newMarkers, i, l, m;
if (this._map) {
var start = 0;
var end = this.options.chunkedLoading && chunkSize < layersArray.length ? chunkSize : layersArray.length;
var offset = 0,
started = (new Date()).getTime();
var process = L.bind(function () {
for (i = start; i < end; i++) {
m = layersArray[i];
var start = (new Date()).getTime();
for (; offset < layersArray.length; offset++) {
if (offset % 200 === 0) {
// every couple hundred markers, instrument the time elapsed since processing started:
var elapsed = (new Date()).getTime() - start;
if (elapsed > chunkInterval) {
break; // been working too hard, time to take a break :-)
}
}
m = layersArray[offset];
//Not point data, can't be clustered
if (!m.getLatLng) {
@@ -191,7 +203,12 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
}
}
if (end === layersArray.length) {
if (chunkProgress) {
// report progress and time elapsed:
chunkProgress(offset, layersArray.length, (new Date()).getTime() - started);
}
if (offset === layersArray.length) {
//Update the icons of all those visible clusters that were affected
this._featureGroup.eachLayer(function (c) {
if (c instanceof L.MarkerCluster && c._iconNeedsUpdate) {
@@ -201,9 +218,7 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
this._topClusterLevel._recursivelyAddChildrenToMap(null, this._zoom, this._currentShownBounds);
} else {
start = end;
end = Math.min(end + chunkSize, layersArray.length);
setTimeout(process, 0);
setTimeout(process, this.options.chunkDelay);
}
}, this);