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

3 files changed, 53 insertions, 25 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,
diff --git a/chimere/templates/chimere/base.html b/chimere/templates/chimere/base.html
index fc3afb8..5417fea 100644
--- a/chimere/templates/chimere/base.html
+++ b/chimere/templates/chimere/base.html
@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 {% load chimere_tags i18n %}
 {% block extra_head %}
+<link rel="stylesheet" href="{{ STATIC_URL }}font-awesome/css/font-awesome.min.css" />
+<link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/bootstrap.min.css" />
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/styles.css" />
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/print.css" media='print'/>
 {% if css_area %}
@@ -8,10 +10,7 @@
 {% if MOBILE %}
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/mobile.css" />
 <script src="{{ STATIC_URL }}chimere/js/mobile.chimere.js" type="text/javascript"></script>{%endif%}
-<link rel="stylesheet" href="{{ STATIC_URL }}font-awesome/css/font-awesome.min.css" />
-<link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/bootstrap.min.css" />
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/form-compat.css" />
-<link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/extra-styles.css" />
 <script src="{{ STATIC_URL }}bootstrap/bootstrap.min.js" type="text/javascript"></script>
     <script type='text/javascript'>
     var has_search = {% if has_search %}true{% else %}false{% endif %};
diff --git a/chimere/templates/chimere/blocks/map.html b/chimere/templates/chimere/blocks/map.html
index c37f5f9..a2b6cba 100644
--- a/chimere/templates/chimere/blocks/map.html
+++ b/chimere/templates/chimere/blocks/map.html
@@ -15,12 +15,13 @@
 <div id='{{map_id}}'></div>
 <script type="text/javascript">
 $("#{{map_id}}").show();
+/*
 $(function(){
    $('#cluster_list').dialog({'autoOpen':false,
                               'resizable':false,
                               'width':340,
                               'dialogClass':'no-titlebar'});
-});
+});*/
 </script>
 <div id="waiting">
     <div id="waiting-content">
@@ -118,5 +119,16 @@ $(function(){
     */
 </script>
 <div id='marker_hover'><div id='marker_hover_content'></div></div>
-<div id='cluster_list'></div>
+<div class="modal fade" id="cluster_list" tabindex="-1" role="dialog" aria-labelledby="cluster-label" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header modal-header-success">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="cluster-label">&nbsp;</h4>
+      </div>
+      <div class="modal-body">
+      </div>
+    </div>
+  </div>
+</div>