Cluster: manage item list at max zoom - now use bootstrap for the window

1 files changed, 37 insertions, 20 deletions

diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index c76267e..fe75c72 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -911,6 +911,7 @@ var invisibleStyleIcon = new ol.style.Style({
                 var key = feature.set('key', 'cluster');
                 var features = feature.get('features');
                 var size = features.length;
+                feature.set('size', size);
                 var style = settings._styleCache[size];
                 // no cluster for lonely marker
                 if (!style && size > 1){
@@ -1053,22 +1054,30 @@ var invisibleStyleIcon = new ol.style.Style({
                             props.name + "</span></li>";
             }
             content += "</ul></div>";
-            $('#cluster_list').html(content);
-            $('#cluster_list').dialog('open');
+            $('#cluster_list .modal-body').html(content);
+            $('#cluster_list').modal('show');
 /*
+            $('#cluster_list').dialog('open');
             $("#cluster_list").on("dialogclose", methods.cleanCluster);
             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');
+                    $('#cluster_list').modal('hide');
                     var splitted = $(this).attr('id').split('_');
                     var index = splitted[splitted.length-1];
-                    feat = feats[parseInt(index)]
-                    methods.openPopup(feat);
+                    feat = feats[parseInt(index)];
+                    var size = feature.getProperties()['size'] ? feature.getProperties()['size'] : 5;
+                    // cf. clusterGetStyle
+                    var radius = Math.max(8, Math.min(size*0.75, 20));
+                    var offset_x = 0.1;
+                    var offset_y = -(radius + radius / 2);
+                    var geom = feature.getGeometry();
+                    methods.openPopup(feat, offset_x, offset_y, geom.getCoordinates());
                     //.attributes.marker;
                     //m.events.triggerEvent('click');
                     e.stopPropagation();
@@ -1076,22 +1085,30 @@ var invisibleStyleIcon = new ol.style.Style({
             });
             return feature;
         },
-        openPopup: function(feature){
-            var geom = feature.getGeometry();
-            if (geom.getType() == 'Point'){
-                settings.popup.setPosition(geom.getCoordinates());
-                settings.popup.setOffset([feature.get('popup_offset_x'),
-                                          -feature.get('popup_offset_y')]);
-            } else if (geom.getType() == 'Polygon'){
-                settings.popup.setPosition(geom.getInteriorPoint().getCoordinates());
-                settings.popup.setOffset([0, 0]);
-            } else if (geom.getType() == 'LineString'){
-                settings.popup.setPosition(geom.getCoordinateAt(0.5));
-                settings.popup.setOffset([0, 0]);
-            } else if (geom.getType() == 'MultipleLineString'){
-                settings.popup.setPosition(geom.getLineString(0).getCoordinatesAt(0.5));
-                settings.popup.setOffset([0, 0]);
+        openPopup: function(feature, offset_x, offset_y, alt_coordinates){
+            if (!offset_x){
+                offset_x = feature.get('popup_offset_x');
+                if (!offset_x) offset_x = 0;
+            }
+            if (!offset_y){
+                offset_y = -feature.get('popup_offset_y');
+                if (!offset_y) offset_y = 0;
+            }
+            if (alt_coordinates){
+                settings.popup.setPosition(alt_coordinates);
+            } else {
+                var geom = feature.getGeometry();
+                if (geom.getType() == 'Point'){
+                    settings.popup.setPosition(geom.getCoordinates());
+                } else if (geom.getType() == 'Polygon'){
+                        settings.popup.setPosition(geom.getInteriorPoint().getCoordinates());
+                } else if (geom.getType() == 'LineString'){
+                        settings.popup.setPosition(geom.getCoordinateAt(0.5));
+                } else if (geom.getType() == 'MultipleLineString'){
+                        settings.popup.setPosition(geom.getLineString(0).getCoordinatesAt(0.5));
+                }
             }
+            settings.popup.setOffset([offset_x, offset_y]);
             $(settings.popup_item).popover({
                 'placement': 'top',
                 'html': true,