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

add a simple progress bar to the 50K sample

Browse Source
This commit is contained in:
Rasmus Schultz
2013-12-24 16:48:01 -05:00
parent 8732cb4f0a
commit 8d53c8a7c2
2 changed files with 43 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/marker-clustering-realworld.50000.html
+18 -1
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,7 +29,23 @@
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 = [];
example/screen.css
+23
View File
@@ -3,3 +3,26 @@
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;
}