[Pkg-javascript-commits] [leaflet-markercluster] 09/219: add a simple progress bar to the 50K sample

Sat May 7 09:39:06 UTC 2016

This is an automated email from the git hooks/post-receive script.

js pushed a commit to branch master
in repository leaflet-markercluster.

commit 8d53c8a7c27aedcd838e26fc7c10a19565e40795
Author: Rasmus Schultz <rasmus at mindplay.dk>
Date:   Tue Dec 24 16:48:01 2013 -0500

    add a simple progress bar to the 50K sample
---
 example/marker-clustering-realworld.50000.html | 21 +++++++++++++++++++--
 example/screen.css                             | 25 ++++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/example/marker-clustering-realworld.50000.html b/example/marker-clustering-realworld.50000.html
index c439ccc..1a1ecdc 100644
--- a/example/marker-clustering-realworld.50000.html
+++ b/example/marker-clustering-realworld.50000.html
@@ -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];
diff --git a/example/screen.css b/example/screen.css
index ea33d34..c89cba8 100644
--- a/example/screen.css
+++ b/example/screen.css
@@ -2,4 +2,27 @@
 	width: 800px; 
 	height: 600px; 
 	border: 1px solid #ccc;
-	}
\ No newline at end of file
+}
+
+#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;
+}

-- 
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/leaflet-markercluster.git

