Leaflet: first fully functionnal version of clustering

6 files changed, 124 insertions, 22 deletions

diff --git a/chimere/settings.sample.py b/chimere/settings.sample.py
index b23f31e..22502b2 100644
--- a/chimere/settings.sample.py
+++ b/chimere/settings.sample.py
@@ -307,27 +307,21 @@ if 'MAP_CSS_URLS' not in globals():
     global MAP_CSS_URLS
     MAP_CSS_URLS = {
         'openlayers':["http://www.openlayers.org/api/theme/default/style.css"],
-        'leaflet':[STATIC_URL + "leaflet/leaflet.css"],
+        'leaflet':[STATIC_URL + "leaflet/leaflet.css",
+                   STATIC_URL + "leaflet-markercluster/MarkerCluster.css",
+                   STATIC_URL + "leaflet-markercluster/MarkerCluster.Default.css",
+                  ]
     }
-    if CHIMERE_ENABLE_CLUSTERING:
-        MAP_CSS_URLS['leaflet'] += [
-                STATIC_URL + "leaflet-markercluster/MarkerCluster.css",
-                STATIC_URL + "leaflet-markercluster/MarkerCluster.Default.css",
-                ]
     # key: [(url, condition)]
     MAP_CONDITIONNAL_CSS_URLS = {
         'openlayers':[("http://www.openlayers.org/api/theme/default/style.css",
                        None)],
         'leaflet':[
-            (STATIC_URL + "leaflet/leaflet.css", None),
-            (STATIC_URL + "leaflet/leaflet.ie.css", 'lte IE 8')
-        ]
-    }
-    if CHIMERE_ENABLE_CLUSTERING:
-        MAP_CSS_URLS['leaflet'] += [
+         (STATIC_URL + "leaflet/leaflet.css", None),
+         (STATIC_URL + "leaflet/leaflet.ie.css", 'lte IE 8')
          (STATIC_URL + "leaflet-markercluster/MarkerCluster.css", None),
          (STATIC_URL + "leaflet-markercluster/MarkerCluster.Default.css", None),
          (STATIC_URL + "leaflet-markercluster/MarkerCluster.Default.ie.css",
           'lte IE 8'),
          ]
-
+    }
diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index 764e0c7..a123a5d 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -1109,3 +1109,54 @@ div.pp_default .pp_expand{
     left:6px;
     bottom:5px;
 }
+
+.marker-cluster.marker-cluster-large {
+    border-radius: 25px;
+}
+
+.marker-cluster.marker-cluster-small {
+    border-radius: 15px;
+}
+
+.marker-cluster.marker-cluster-large div {
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+}
+
+.marker-cluster.marker-cluster-small div {
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+}
+
+.marker-cluster.marker-cluster-large span {
+    line-height: 40px;
+}
+
+.marker-cluster.marker-cluster-small span {
+    line-height: 20px;
+}
+
+.marker-cluster-small-number,
+.marker-cluster-medium-number,
+.marker-cluster-large-number{
+    position: relative;
+    font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+    text-align: center;
+}
+
+.marker-cluster-small-number{
+    width: 30px;
+    top: -22px;
+}
+
+.marker-cluster-medium-number{
+    width: 40px;
+    top: -27px;
+}
+
+.marker-cluster-large-number{
+    width: 50px;
+    top: -32px;
+}
diff --git a/chimere/static/chimere/img/marker-cluster-large.png b/chimere/static/chimere/img/marker-cluster-large.png
new file mode 100644
index 0000000..477e2b8
--- /dev/null
+++ b/chimere/static/chimere/img/marker-cluster-large.png
diff --git a/chimere/static/chimere/img/marker-cluster-medium.png b/chimere/static/chimere/img/marker-cluster-medium.png
new file mode 100644
index 0000000..1d9099b
--- /dev/null
+++ b/chimere/static/chimere/img/marker-cluster-medium.png
diff --git a/chimere/static/chimere/img/marker-cluster-small.png b/chimere/static/chimere/img/marker-cluster-small.png
new file mode 100644
index 0000000..ae5ce5a
--- /dev/null
+++ b/chimere/static/chimere/img/marker-cluster-small.png
diff --git a/chimere/static/chimere/js/jquery.chimere-leaflet.js b/chimere/static/chimere/js/jquery.chimere-leaflet.js
index 36729c1..ef156fb 100644
--- a/chimere/static/chimere/js/jquery.chimere-leaflet.js
+++ b/chimere/static/chimere/js/jquery.chimere-leaflet.js
@@ -95,7 +95,12 @@ See the file COPYING for details.
             marker_hover_offset: null,
             icon_start: null,
             icon_step: null,
-            icon_end: null
+            icon_end: null,
+            weight_steps: new Array(6, 15),
+            weight_icon_sizes: new Array(30, 40, 50),
+            weight_icon_classes: new Array('marker-cluster-small',
+                                           'marker-cluster-medium',
+                                           'marker-cluster-large'),
         };
         var settings = {};
     /*
@@ -121,19 +126,54 @@ See the file COPYING for details.
             }
             settings.icons = new Object();
             if (settings.enable_clustering){
+                settings.NumberedDivIcon = L.Icon.extend({
+                    options: {
+                        iconUrl: STATIC_URL + 'chimere/img/empty.png',
+                        number: '',
+                        shadowUrl: null,
+                        iconSize: new L.Point(40, 40),
+                        iconAnchor: new L.Point(20, 20),
+                        popupAnchor: new L.Point(0, -20),
+                        className: '',
+                        numberClassName: settings.weight_icon_classes[0]+'-number',
+                    },
+
+                    createIcon: function () {
+                        var div = document.createElement('div');
+                        var img = this._createImg(this.options['iconUrl']);
+                        var numdiv = document.createElement('div');
+                        numdiv.setAttribute( "class", this.options['numberClassName']);
+                        numdiv.innerHTML = this.options['number'] || '';
+                        div.appendChild ( img );
+                        div.appendChild ( numdiv );
+                        this._setIconStyles(div, 'icon');
+                    return div;
+                    },
+                    createShadow: function () {
+                        return null;
+                    }
+                });
+
                 settings.layerMarkers = new L.MarkerClusterGroup({
-                    iconCreateFunction: function (cluster) {
+                    iconCreateFunction : function (cluster) {
                         var markers = cluster.getAllChildMarkers();
                         var weight = 0;
                         for (idx=0;idx<markers.length;idx++){
                             weight += markers[idx].options.weight;
                         }
-                        return new L.DivIcon({ html: weight,
-                                               className: 'mycluster',
-                                               iconSize: new L.Point(40, 40) });
-                    },
-
-
+                        var idx = 2;
+                        if (weight < settings.weight_steps[0]) {
+                            idx = 0;
+                        } else if (weight < settings.weight_steps[1]) {
+                            idx = 1;
+                        }
+                        return new L.DivIcon({
+                                html: '<div><span>' + weight + '</span></div>',
+                                className: 'marker-cluster ' + settings.weight_icon_classes[idx],
+                                iconSize: new L.Point(settings.weight_icon_sizes[idx],
+                                                      settings.weight_icon_sizes[idx])
+                                });
+                    }
                 });
             } else {
                 settings.layerMarkers = L.geoJson(null, {
@@ -355,12 +395,29 @@ See the file COPYING for details.
                                     if (feature.properties.weight){
                                         weight = feature.properties.weight;
                                     }
+                                    var idx = 2;
+                                    if (weight < settings.weight_steps[0]) {
+                                        idx = 0;
+                                    } else if (weight < settings.weight_steps[1]) {
+                                        idx = 1;
+                                    }
+                                    var size = settings.weight_icon_sizes[idx];
+                                    var icon = new settings.NumberedDivIcon({
+                                        number: weight,
+                                        iconSize: new L.Point(size, size),
+                                        iconAnchor: new L.Point(size/2, size/2),
+                                        popupAnchor: new L.Point(0, -size/2),
+                                        iconUrl:STATIC_URL + "chimere/img/" + settings.weight_icon_classes[idx] + ".png",
+                                        numberClassName:settings.weight_icon_classes[idx] + "-number"
+                                    });
+;
                                     var marker = new L.Marker(
                                         new L.LatLng(
                                             feature.geometry.coordinates[1],
                                             feature.geometry.coordinates[0]),
                                             { title: feature.properties.name,
-                                              weight: weight});
+                                              weight: weight,
+                                              icon:icon});
                                     marker.bindPopup(feature.properties.name);
                                     settings.layerMarkers.addLayer(marker);
                                 }