cf brutasse#37 - Naive client clustering implementation with 1000 mar…

…kers This is just a Proof-of-Concept with the leaflet-markercluster plugin.
yohanboniface · Sep 25, 2012 · 813ed44 · 813ed44
1 parent 5cecad0
commit 813ed44
Show file tree

Hide file tree

Showing 6 changed files with 1,758 additions and 3 deletions.
diff --git a/djangopeople/djangopeople/static/djangopeople/css/styles.css b/djangopeople/djangopeople/static/djangopeople/css/styles.css
@@ -536,6 +536,45 @@ div.leaflet-popup-content a {
 	color: #ab5603;
 }
 
+.marker-cluster-small {
+	background-color: #A2C474;
+}
+.marker-cluster-small div {
+	background-color: #A6CC74;
+}
+
+.marker-cluster-medium {
+	background-color: #A6CC74;
+}
+.marker-cluster-medium div {
+	background-color: #92cc47;
+}
+
+.marker-cluster-large {
+	background-color: #68BA70;
+}
+.marker-cluster-large div {
+	background-color: #35913E;
+}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 20px;
+}
+.marker-cluster div {
+	width: 30px;
+	height: 30px;
+	margin-left: 5px;
+	margin-top: 5px;
+
+	text-align: center;
+	border-radius: 15px;
+	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+.marker-cluster span {
+	line-height: 30px;
+}
+
 /* @end */
 
 .highlight {

diff --git a/djangopeople/djangopeople/static/djangopeople/js/maps.js b/djangopeople/djangopeople/static/djangopeople/js/maps.js
@@ -28,12 +28,21 @@ function zoomOn(lat, lon) {
  */
 function plotPeopleOnMap(people, map) {
     var bounds = new L.LatLngBounds();
+    var polygonOptions = {
+        fillColor: "#ab5603",
+        color: "#ab5603",
+    }
+    var markers = new L.MarkerClusterGroup({
+        "polygonOptions": polygonOptions
+    });
     $.each(people, function(index, person) {
         var marker = getPersonMarker(person);
         bounds.extend(marker.getLatLng());
-        marker.addTo(map);
+        // marker.addTo(map);
+        markers.addLayer(marker);
     });
-    map.fitBounds(bounds);
+    // map.fitBounds(bounds);
+    map.addLayer(markers);
     return bounds;
 }
 

diff --git a/djangopeople/djangopeople/static/djangopeople/leaflet.markercluster/markercluster.css b/djangopeople/djangopeople/static/djangopeople/leaflet.markercluster/markercluster.css
@@ -0,0 +1,6 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+    -webkit-transition: -webkit-transform 0.25s ease-out, opacity 0.25s ease-in;
+    -moz-transition: -moz-transform 0.25s ease-out, opacity 0.25s ease-in;
+    -o-transition: -o-transform 0.25s ease-out, opacity 0.25s ease-in;
+    transition: transform 0.25s ease-out, opacity 0.25s ease-in;
+    }