Map: performance optimization to manage large dataset

3 files changed, 77 insertions, 144 deletions

diff --git a/ishtar_common/static/js/ishtar-map.js b/ishtar_common/static/js/ishtar-map.js
index 1d84adb49..1488d8fcd 100644
--- a/ishtar_common/static/js/ishtar-map.js
+++ b/ishtar_common/static/js/ishtar-map.js
@@ -36,13 +36,8 @@ var get_layers = function(layers){
     return ol_layers;
 };
 
-/* get markers */
-
-var get_markers = function(points){
-};
-
 /* styles */
-var get_style = function(feature){
+var get_icon_style = function(feature){
     return new ol.style.Style({
         image: new ol.style.Icon({
             anchor: [17, 50],
@@ -54,98 +49,55 @@ var get_style = function(feature){
     });
 };
 
+var cluster_get_style = function(feature, resolution){
+    feature.set('key', 'cluster');
+    var cluster_features = feature.get('features');
+
+    var size = cluster_features.length;
+    feature.set('size', size);
+
+    var style = _styleCache[size];
+
+    if (!style && size == 1){
+        style = _styleCache[size] = [get_icon_style()];
+    } else if (!style && size > 1){
+        var color = size > 25 ? "192,0,0" : size > 8 ? "255,128,0" : "0,128,0";
+        var radius = Math.max(8, Math.min(size * 0.75, 20));
+        var lbl = size.toString();
+        style = _styleCache[size] = [
+            new ol.style.Style({
+                image: new ol.style.Circle({
+                    radius: radius,
+                    stroke: new ol.style.Stroke({
+                        color:"rgba("+color+",0.5)",
+                        width: 15
+                    }),
+                    fill: new ol.style.Fill({
+                        color:"rgba("+color+",1)"
+                    })
+                }),
+                text: new ol.style.Text({
+                    text: lbl,
+                    fill: new ol.style.Fill({
+                        color: '#fff'
+                    })
+                })
+            })
+        ];
+    }
+    return style;
+}
+
 /* clustering */
 
-var invisible_style_icon;
 var _styleCache;
-var _remindOldStyle;
-var _remindUpdated;
-var _currentRemind;
-var _revision = 1;
 var cluster_source;
 var cluster_layer;
 
 var enable_clustering = function(){
-
-    if (!invisible_style_icon){
-        invisible_style_icon = new ol.style.Style({
-            image: new ol.style.Icon({
-                //still need something even if it's invisible
-                src : static_path + marker_cluster,
-                opacity : 0
-            })
-        });
-    }
-
-    // Style clusters and hide items inside clusters
+    // cache for styles
     _styleCache = {};
-    _remindOldStyle = {};
-    _remindUpdated = {};
-    _currentRemind = -1;
-
-    function cluster_get_style (feature, resolution){
-        feature.set('key', 'cluster');
-        var cluster_features = feature.get('features');
-
-        var size = cluster_features.length;
-        feature.set('size', size);
-
-        var style = _styleCache[size];
-
-        // no cluster for lonely marker
-        if (!style && size > 1){
-            var color = size > 25 ? "192,0,0" : size > 8 ? "255,128,0" : "0,128,0";
-            var radius = Math.max(8, Math.min(size * 0.75, 20));
-            var lbl = size.toString();
-            style = _styleCache[size] = [
-                new ol.style.Style({
-                    image: new ol.style.Circle({
-                        radius: radius,
-                        stroke: new ol.style.Stroke({
-                            color:"rgba("+color+",0.5)",
-                            width: 15
-                        }),
-                        fill: new ol.style.Fill({
-                            color:"rgba("+color+",1)"
-                        })
-                    }),
-                    text: new ol.style.Text({
-                        text: lbl,
-                        fill: new ol.style.Fill({
-                            color: '#fff'
-                        })
-                    })
-                })
-            ];
-        }
-        // don't reapply the style when no modif have been opered
-        if (_currentRemind != _revision){
-            _remindUpdated = [];
-            _currentRemind = _revision;
-        }
-        if (size > 1){
-            // marker himself disappear
-            for (idx in cluster_features){
-                var feat = cluster_features[idx];
-                if (!_remindUpdated[feat.getProperties()['id']]){
-                    if (!_remindOldStyle[feat.getProperties()['id']]){
-                        _remindOldStyle[feat.getProperties()['id']] = feat.getStyle();
-                    }
-                    feat.setStyle(invisible_style_icon);
-                    _remindUpdated[feat.getProperties()['id']] = 1;
-                }
-            }
-        } else {
-            // or re-appear
-            var feat = cluster_features[0];
-            if (!_remindUpdated[feat.getProperties()['id']] &&
-                  _remindOldStyle[feat.getProperties()['id']]){
-                feat.setStyle(_remindOldStyle[feat.getProperties()['id']]);
-                _remindUpdated[feat.getProperties()['id']] = 1;
-            }
-        }
-        return style;
-    }
+
 
     // Cluster Source
     cluster_source = new ol.source.Cluster({
@@ -165,9 +117,6 @@ var enable_clustering = function(){
 var reinit_clustering = function(){
     cluster_source.getSource().clear();
     _styleCache = {};
-    _remindOldStyle = {};
-    _remindUpdated = {};
-    _currentRemind = -1;
 };
 
 /* manage clicks */
@@ -218,8 +167,6 @@ var click_on_feature = function(feature){
         var key = feature.get('key');
         if (key && key.length > 6 && key.substring(0, 7) == 'cluster'){
             feature = click_on_cluster(feature);
-        } else {
-            feature = click_on_pointer(feature);
         }
     }, timeout);
 };
@@ -230,10 +177,14 @@ var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
         // zoom animation must be slower
         duration = animation_duration * 2;
     }
+
     if (!nb_zoom) nb_zoom = 0;
 
     var props = feature.getProperties();
     if (!'features' in props) return feature;
+
+    if (props['features'].length == 1) return display_cluster_detail(feature);
+
     if (!current_nb_items){
         current_nb_items = props['features'].length;
     } else if(current_nb_items != props['features'].length) {
@@ -278,9 +229,7 @@ var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
             );
             if (new_feature){
                 if (zoom_level < min_auto_zoom_on_cluster){
-                    return display_cluster_detail(
-                        new_feature, zoom_level + 1, duration, nb_zoom,
-                        current_nb_items);
+                    return display_cluster_detail(new_feature);
                 }
                 return click_on_cluster(
                     new_feature, zoom_level + 1, duration, nb_zoom,
@@ -291,18 +240,17 @@ var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
         }, duration + 200);
 };
 
-var click_on_pointer = function(feature){
-    console.log("click_on_pointer");
-    var features = new Array();
-    features.push(feature)
-    display_items(features, -14, -54);
-};
-
 /* display info */
 
 var display_cluster_detail = function(cluster){
-    console.log("display_cluster_detail");
-    display_items(cluster.getProperties()['features'], -14, -21);
+    // console.log("display_cluster_detail");
+    var features = cluster.getProperties()['features']
+    var offset_x = -14;
+    var offset_y = -21;
+    if (features.length == 1){
+        offset_y = -54;
+    }
+    display_items(features, offset_x, offset_y);
 };
 
 var display_items = function(features, offset_x, offset_y){
@@ -310,22 +258,26 @@ var display_items = function(features, offset_x, offset_y){
 };
 
 var _display_items = function(features, offset_x, offset_y){
-    console.log("display_items");
+    // console.log("display_items");
     var feature = features[0];
     var geom = feature.getGeometry();
     var popup_content = "<ul>";
-    features.forEach(function(feat){
+    var has_extra = false;
+    for (idx_feat in features){
+        if (idx_feat >= 5){
+            has_extra = true;
+            popup_content += "<li><a href='#'>...</a></li>"
+            break;
+        }
+        var feat = features[idx_feat];
         var properties = feat.getProperties();
         popup_content += "<li>" + properties['link'] + " " + properties['name'] + "</li>"
-        console.log(properties);
-    });
+    }
     popup_content += "</ul>";
     $(popup_item).html(popup_content);
     popup.setPosition([0, 0]);  // out of the map
     $(popup_item).show(function(){
-
         offset_x -= $(popup_item).width() / 2;
-        console.log(offset_x);
         popup.setOffset([offset_x, offset_y]);
         popup.setPosition(geom.getCoordinates());
     });
@@ -366,8 +318,7 @@ var init_popup = function(){
 
 
 /* display map */
-var vector_source;
-var vector_layer;
+
 var center;
 var point_features;
 var map;
@@ -380,22 +331,10 @@ var proj_options = {
 var geojson_format = new ol.format.GeoJSON(proj_options);
 var wkt_format = new ol.format.WKT(proj_options);
 
-var initialize_map = function(layers){
+var initialize_base_map = function(layers){
     center = wkt_format.readGeometry(map_default_center).getCoordinates();
 
-    /*
-    vector_source = new ol.source.Vector({
-        features: geojson_format.readFeatures(points)
-    });
-    */
-    vector_source = new ol.source.Vector();
-    vector_layer = new ol.layer.Vector({
-        source: vector_source,
-        style: get_style
-    });
-
     map_layers = get_layers(layers);
-    map_layers.push(vector_layer);
 
     map_view = new ol.View({
         projection: view_projection,
@@ -414,7 +353,7 @@ var initialize_map = function(layers){
 var redraw_map = function(layers){
     map.setTarget(null);
     map = null;
-    initialize_map(layers);
+    initialize_base_map(layers);
     reinit_clustering();
     current_feature = null;
 };
@@ -425,25 +364,21 @@ var display_map = function(current_map_id, points, layers){
     if (map){
         redraw_map(layers);
     } else {
-        initialize_map(layers);
+        initialize_base_map(layers);
     }
     point_features = geojson_format.readFeatures(points);
-    vector_source.clear();
-    vector_source.addFeatures(point_features);
 
-    map.updateSize();
+    enable_clustering();
+    cluster_source.getSource().addFeatures(point_features);
+    init_popup();
+
     if (points.features.length){
-        map_view.fit(vector_source.getExtent());
+        map_view.fit(cluster_source.getSource().getExtent());
         if (map_view.getZoom() > 12){
             map_view.setZoom(12);
         }
     }
 
-    enable_clustering();
-    cluster_source.getSource().addFeatures(point_features);
-
-    init_popup();
-
     map.on('click', manage_click_on_map);
     map.on('pointermove', manage_hover);
 }
diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 929629397..be3374e54 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -660,8 +660,8 @@ function load_url(url, callback){
 }
 
 function open_window(url){
-    var newwindow = window.open(url, '_blank',
-                                'height=400,width=600,scrollbars=yes');
+    var newwindow = window.open(
+        url, '_blank', 'height=400,width=600,scrollbars=yes');
     if (window.focus) {newwindow.focus()}
     return false;
 }
@@ -1010,11 +1010,9 @@ var ajax_post = function(url, data, target, callback, error_callback){
             if (error_callback) error_callback();
         }
     });
-
 };
 
 var qa_action_register = function(url) {
-
     $('#qa-action').on('submit', function(event){
         event.preventDefault();
         var fn = function(){
@@ -1217,7 +1215,7 @@ var render_paginate_button = function(nb, current, label, disabled, extra_class)
     if (disabled) extra_class += ' disabled';
     if (!label) label = nb;
 
-    var html = '<li class="paginate_button page-item' + extra_class +'">';
+    var html = '<li class="paginate_button page-item' + extra_class + '">';
     html += '<a href="#" data-dt-idx="' + nb + '" tabindex="0" class="page-link">';
     html += label + '</a></li>';
     return html;
diff --git a/ishtar_common/static/media/images/default-pointer.png b/ishtar_common/static/media/images/default-pointer.png
index 5990f1518..bcc836ab2 100644
--- a/ishtar_common/static/media/images/default-pointer.png
+++ b/ishtar_common/static/media/images/default-pointer.png