Map: first management of marker clustering

4 files changed, 133 insertions, 9 deletions

diff --git a/chimere/admin.py b/chimere/admin.py
index 24d28ed..977a9b4 100644
--- a/chimere/admin.py
+++ b/chimere/admin.py
@@ -244,6 +244,10 @@ class MultimediaTypeAdmin(admin.ModelAdmin):
     list_display = ('name', 'media_type', 'mime_type', 'iframe', 'available')
     list_filter = ('media_type', 'available')
 
+class MultimediaExtensionAdmin(admin.ModelAdmin):
+    list_display = ('name', 'multimedia_type')
+    list_filter = ('multimedia_type',)
+
 class PropertyModelChoiceInline(admin.TabularInline):
     model = PropertyModelChoice
     extra = 1
diff --git a/chimere/static/chimere/img/empty.png b/chimere/static/chimere/img/empty.png
new file mode 100644
index 0000000..1ad1e19
--- /dev/null
+++ b/chimere/static/chimere/img/empty.png
diff --git a/chimere/static/chimere/img/marker-cluster.png b/chimere/static/chimere/img/marker-cluster.png
new file mode 100644
index 0000000..3d15153
--- /dev/null
+++ b/chimere/static/chimere/img/marker-cluster.png
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index c5a88a5..37f27a4 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -107,7 +107,8 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             default_icon: new OpenLayers.Icon(
                     'http://www.openlayers.org/dev/img/marker-green.png',
                     new OpenLayers.Size(21, 25),
-                    new OpenLayers.Pixel(-(21/2), -25))
+                    new OpenLayers.Pixel(-(21/2), -25)),
+            cluster_icon: null
         };
         var settings = {};
     /*
@@ -119,6 +120,13 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
         */
         init: function ( options ) {
             /* Manage parameters */
+            // not staticaly in default because of STATIC_URL init
+            if (defaults.cluster_icon == null){
+                defaults.cluster_icon = new OpenLayers.Icon(
+                    STATIC_URL+'chimere/img/marker-cluster.png',
+                    new OpenLayers.Size(36, 36),
+                    new OpenLayers.Pixel(-(36/2), -(36/2)));
+            }
             settings = $.extend({}, defaults);
             if ( options ) $.extend(settings, options);
             var map_element = $(this).get(0);
@@ -251,6 +259,71 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                 settings.map.addControl(new OpenLayers.Control.ModifyFeature(
                         settings.layerVectors, {clickout:false, toggle:false}));
             }
+
+            var style = new OpenLayers.Style({
+                   graphicTitle: "${name}",
+                   externalGraphic: "${icon}",
+                   graphicWidth: "${width}",
+                   graphicHeight: "${height}",
+                   graphicXOffset: "${offsetx}",
+                   graphicYOffset: "${offsety}",
+                   graphicOpacity: 1,
+                   label: "${label}",
+                   fontWeight:'bold',
+                   fontSize:'1.3em'
+               }, {
+               context: {
+                 name: function(feature) {
+                    if(feature.cluster) {
+                        feature.attributes.width = settings.cluster_icon.size.w;
+                        feature.attributes.height = settings.cluster_icon.size.h;
+                        feature.attributes.offsetx = settings.cluster_icon.offset.x;
+                        feature.attributes.offsety = settings.cluster_icon.offset.y;
+                    } else{
+                        var marker = feature.attributes.marker
+                        feature.attributes.width = marker.icon.size.w;
+                        feature.attributes.height = marker.icon.size.h;
+                        feature.attributes.offsetx = settings.icon_offset.x;
+                        feature.attributes.offsety = settings.icon_offset.y;
+                    }
+                    return feature.attributes.name;
+                 },
+                 label: function(feature) {
+                    // clustered features count or blank if feature is not a cluster
+                    return feature.cluster ? feature.cluster.length : "";
+                 },
+                 icon: function(feature) {
+                    if (feature.cluster){
+                        return settings.cluster_icon.url;
+                    } else {
+                        return STATIC_URL + 'chimere/img/empty.png';
+                    }
+                 },
+                 width: function(feature) { return feature.attributes.width; },
+                 height: function(feature) { return feature.attributes.height; },
+                 offsetx: function(feature) { return feature.attributes.offsetx; },
+                 offsety: function(feature) { return feature.attributes.offsety; }
+                 }});
+
+
+            /* Cluster layer */
+            var strategy = new OpenLayers.Strategy.Cluster({distance: 20,
+                                                            threshold: 3});
+            settings.layerCluster = new OpenLayers.Layer.Vector("Cluster layer",
+                {styleMap: new OpenLayers.StyleMap({'default': style}),
+                 strategies: [strategy]});
+            settings.map.addLayer(settings.layerCluster);
+
+            var clusterSelect = new OpenLayers.Control.SelectFeature(
+                                                settings.layerCluster);
+            settings.map.addControl(clusterSelect);
+            clusterSelect.activate();
+            settings.layerCluster.events.on({
+                'featureselected': methods.zoomOnCluster,
+                'featurehighlighted': function (evt) {
+                document.body.style.cursor='pointer';}
+            });
+
             /* Markers layer */
             settings.layerMarkers = new OpenLayers.Layer.Markers('POIs');
             settings.map.addLayer(settings.layerMarkers);
@@ -280,6 +353,8 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             }
 
             if (!settings.edition){
+                settings.map.events.register('zoomend', null,
+                                              methods.cleanCluster);
                 methods.loadCategories();
                 methods.loadGeoObjects();
                 methods.activateContextMenu()
@@ -352,12 +427,6 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             settings.map.zoomIn();
         },
 
-        // zoom in from the map menu
-        zoomIn: function(){
-            methods.mapCenter();
-            settings.map.zoomIn();
-        },
-
         // zoom out from the map menu
         zoomOut: function(){
             methods.mapCenter();
@@ -374,6 +443,16 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
         setCurrentPosition: function(lonlat){
             settings.current_position = lonlat;
         },
+        zoomOnCluster: function(e){
+            if(!e.feature.cluster) // if not cluster
+            {
+                e.feature.attributes.marker.events.triggerEvent('click');
+            } else {
+                settings.map.setCenter(
+                            e.feature.geometry.getBounds().getCenterLonLat());
+                methods.zoomIn();
+            }
+        },
 
         /*
         * Display menu on the map
@@ -408,6 +487,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                     success: function (data) {
                         settings.layerMarkers.clearMarkers();
                         settings.layerVectors.removeAllFeatures();
+                        settings.cluster_array = [];
                         for (var i = 0; i < data.features.length; i++) {
                             var feature = data.features[i];
                             if (feature.geometry.type == 'Point'){
@@ -416,6 +496,9 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                                 methods.addRoute(feature);
                             }
                         }
+                        settings.layerCluster.addFeatures(
+                                                        settings.cluster_array);
+                        methods.cleanCluster();
                     },
                     error: function (data) {
                         settings.layerMarkers.clearMarkers();
@@ -541,6 +624,26 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             }
         },
         /*
+         * Hide clusterized markers
+         */
+        cleanCluster: function (){
+            var hidden_feature_idx = [];
+            for(var idx=0; idx<settings.layerCluster.features.length; idx++){
+                if(settings.layerCluster.features[idx].cluster){
+                    for(var c=0; c < settings.layerCluster.features[idx].cluster.length; c++) {
+                        hidden_feature_idx.push(settings.layerCluster.features[idx].cluster[c].attributes.pk);
+                    }
+                }
+            }
+            for(j=0; j<settings.layerMarkers.markers.length;j++){
+                if(hidden_feature_idx.indexOf(settings.layerMarkers.markers[j].pk) > -1){
+                    settings.layerMarkers.markers[j].display(false);
+                } else {
+                    settings.layerMarkers.markers[j].display(true);
+                }
+            }
+        },
+        /*
         * Put a marker on the map
         */
         addMarker: function (mark) {
@@ -554,9 +657,11 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                                            mark.properties.icon_height);
             var iconclone = new OpenLayers.Icon(MEDIA_URL + mark.properties.icon_path,
                                             size, settings.icon_offset);
+
             var feature = new OpenLayers.Feature(settings.layerMarkers,
-                      new OpenLayers.LonLat(lon, lat).transform(EPSG_DISPLAY_PROJECTION,
-                                                                EPSG_PROJECTION),
+                      new OpenLayers.LonLat(lon, lat).transform(
+                                                        EPSG_DISPLAY_PROJECTION,
+                                                        EPSG_PROJECTION),
                       {icon:iconclone});
             feature.pk = mark.properties.pk;
             feature.popupClass = settings.popupClass;
@@ -565,6 +670,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             feature.data.popupContentHTML += "</div>";
             feature.data.overflow = 'hidden';
             var marker = feature.createMarker();
+            marker.pk = feature.pk;
             /* manage markers events */
             var _popup = function() {
                 /* show the popup */
@@ -646,6 +752,20 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                 _repan_popup();
                 methods.loadCategories();
             }
+
+
+            // manage cluster layer
+            var point = new OpenLayers.Geometry.Point(lon, lat).transform(
+                                                        EPSG_DISPLAY_PROJECTION,
+                                                        EPSG_PROJECTION);
+            var feat = new OpenLayers.Feature.Vector(point);
+            feat.attributes = { icon: MEDIA_URL + mark.properties.icon_path,
+                                name: "", label:"", pk:mark.properties.pk,
+                                marker:marker};
+            settings.cluster_array.push(feat);
+
+
+
             return feature;
         },