Show a menu on clustered items in order to display them when they are on the same place

3 files changed, 60 insertions, 4 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index ea7d4c0..ab68d68 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -1024,6 +1024,32 @@ div.pp_default .pp_expand{
   padding:0.1em 0.5em;
 }
 
+#cluster_list{
+    background-image:none;
+}
+
+#cluster_list ul{
+    list-style-type:none;
+    margin:0;
+    padding:0;
+}
+
+#cluster_list img{
+    vertical-align:middle;
+    display:inline-block;
+}
+
+#cluster_list span{
+    vertical-align:middle;
+    display:inline-block;
+    width:210px;
+    cursor:pointer;
+}
+
+#cluster_list li{
+    padding:0 6px;
+}
+
 .olControlSimplePanZoom {
   top: 10px;
   right: 10px;
@@ -1033,7 +1059,6 @@ div.pp_default .pp_expand{
   background-image: url('../img/map_sprite.png');
   position:absolute;
   background-repeat: no-repeat;
-  cursor:hand;
   cursor:pointer;
 }
 
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 59e00c8..f984e22 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -527,12 +527,34 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             if(!feature.cluster) // if not cluster
             {
                 feature.attributes.marker.events.triggerEvent('click');
+                feature.attributes.marker.events.triggerEvent('touchstart');
                 feature.attributes.marker.events.triggerEvent('mouseover');
                 feature.attributes.marker.events.triggerEvent('mouseout');
             } else {
+                var content = "<div class='dialog-content'><ul>";
+                for (var idx=0;idx<feature.cluster.length; idx++){
+                    var feat = feature.cluster[idx];
+                    content += "<li><img src="+feat.attributes.icon+">" +
+                        "<span class='cluster_list' id='cluster_list_"+idx+"'>" +
+                                feat.attributes.name + "</span></li>";
+                }
+                content += "</ul></div>";
+                $('#cluster_list').html(content);
+                $('#cluster_list').dialog('open');
                 methods.zoomIn();
                 settings.map.setCenter(
                             feature.geometry.getBounds().getCenterLonLat());
+                // register after the display
+                settings.clustered_feature = feature.cluster;
+                jQuery(".cluster_list").click(
+                    function(e){
+                        $('#cluster_list').dialog('close');
+                        var splitted = $(this).attr('id').split('_');
+                        var index = splitted[splitted.length-1];
+                        m = settings.clustered_feature[parseInt(index)].attributes.marker;
+                        m.events.triggerEvent('click');
+                        e.stopPropagation();
+                });
             }
         },
 
@@ -799,6 +821,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             feature.data.overflow = 'hidden';
             var marker = feature.createMarker();
             marker.pk = feature.pk;
+            marker.name = mark.properties.name;
             marker.icon_url = icon_url;
             marker.icon_hover_url = icon_hover_url;
             marker.category_name = mark.properties.category_name;
@@ -945,8 +968,8 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                                                         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};
+                                    name: mark.properties.name, label:"",
+                                    pk:mark.properties.pk, marker:marker};
                 settings.cluster_array.push(feat);
             }
 
diff --git a/chimere/templates/chimere/blocks/map.html b/chimere/templates/chimere/blocks/map.html
index 75be866..07f0618 100644
--- a/chimere/templates/chimere/blocks/map.html
+++ b/chimere/templates/chimere/blocks/map.html
@@ -1,7 +1,13 @@
 {% load i18n %}
 <div id='{{map_id}}'></div>
 <script type="text/javascript">
-   $("#{{map_id}}").show();
+$("#{{map_id}}").show();
+$(function(){
+   $('#cluster_list').dialog({'autoOpen':false,
+                              'resizable':false,
+                              'width':340,
+                              'dialogClass':'no-titlebar'});
+});
 </script>
 <div id="waiting">
     <div id="waiting-content">
@@ -83,3 +89,5 @@
     });
 </script>
 <div id='marker_hover'><div id='marker_hover_content'></div></div>
+<div id='cluster_list'></div>
+