Sheet - Map : manage many map on a page - fix vector source display

2 files changed, 148 insertions, 121 deletions

diff --git a/ishtar_common/static/js/ishtar-map.js b/ishtar_common/static/js/ishtar-map.js
index ceef3a59e..0613ec285 100644
--- a/ishtar_common/static/js/ishtar-map.js
+++ b/ishtar_common/static/js/ishtar-map.js
@@ -9,6 +9,11 @@ var animation_duration = 250;
 var cluster_threshold_1 = 8;
 var cluster_threshold_2 = 25;
 
+var base_color_R = 111;
+var base_color_V = 66;
+var base_color_B = 193;
+var base_color_rvb;
+
 var map_default_center = 'SRID=4326;POINT (2.4397 46.5528)';
 var map_default_zoom = '7';
 var min_auto_zoom_on_cluster = 13;
@@ -55,11 +60,11 @@ var get_icon_style = function(feature){
 var get_vector_style = function(feature){
     return new ol.style.Style({
         stroke: new ol.style.Stroke({
-            color: 'red',
+            color: 'rgba(' + base_color_rvb + ', 1)',
             width: 2
         }),
         fill: new ol.style.Fill({
-            color: 'rgba(255,0,0,0.2)'
+            color: 'rgba(' + base_color_rvb + ', 0.2)'
         })
     });
 };
@@ -106,31 +111,30 @@ var cluster_get_style = function(feature, resolution){
 /* clustering */
 
 var _styleCache;
-var cluster_source;
-var cluster_layer;
+var cluster_source = {};
+var cluster_layer = {};
 
-var enable_clustering = function(){
+var enable_clustering = function(map_id){
     // cache for styles
     _styleCache = {};
 
-
     // cluster Source
-    cluster_source = new ol.source.Cluster({
+    cluster_source[map_id] = new ol.source.Cluster({
         distance: 40,
         source: new ol.source.Vector()
     });
     // animated cluster layer
-    cluster_layer = new ol.layer.Vector({
+    cluster_layer[map_id] = new ol.layer.Vector({
         name: 'Cluster',
-        source: cluster_source,
+        source: cluster_source[map_id],
         // cluster style
         style: cluster_get_style
     });
-    map.addLayer(cluster_layer);
+    map[map_id].addLayer(cluster_layer[map_id]);
 };
 
-var reinit_clustering = function(){
-    cluster_source.getSource().clear();
+var reinit_clustering = function(map_id){
+    cluster_source[map_id].getSource().clear();
     _styleCache = {};
 };
 
@@ -153,21 +157,23 @@ var wait_animation_end = function(callback, retry){
     }, 100);
 };
 
-var manage_click_on_map = function(e) {
-    var feature = map.forEachFeatureAtPixel(
-        e.pixel,
-        function(feature, layer) {
-            return feature;
-        }
-    );
-    click_on_feature(feature, e);
+var manage_click_on_map = function(map_id){
+    return function(e) {
+        var feature = map[map_id].forEachFeatureAtPixel(
+            e.pixel,
+            function(feature, layer) {
+                return feature;
+            }
+        );
+        click_on_feature(map_id, feature, e);
+    };
 };
 
-var click_on_feature = function(feature, e){
+var click_on_feature = function(map_id, feature, e){
 
-    if (!$(e.target).is($(popup_item))
-        && !$.contains($(popup_item)[0],e.target) ) {
-        $(popup_item).hide();
+    if (!$(e.target).is($(popup_item[map_id]))
+        && !$.contains($(popup_item[map_id])[0], e.target) ) {
+        $(popup_item[map_id]).hide();
     }
 
     if (typeof feature == 'undefined'){
@@ -182,14 +188,14 @@ var click_on_feature = function(feature, e){
         // zoom on aggregated
         var key = feature.get('key');
         if (key && key.length > 6 && key.substring(0, 7) == 'cluster'){
-            feature = click_on_cluster(feature);
+            feature = click_on_cluster(map_id, feature);
         }
     }, timeout);
 };
 
 var auto_zoom = false;
 
-var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
+var click_on_cluster = function(map_id, feature, zoom_level, duration, nb_zoom,
                                 current_nb_items){
     if (!duration){
         // zoom animation must be slower
@@ -202,7 +208,7 @@ var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
     if (!'features' in props) return feature;
 
     if (!auto_zoom || props['features'].length == 1){
-        return display_cluster_detail(feature);
+        return display_cluster_detail(map_id, feature);
     }
 
     if (!current_nb_items){
@@ -212,7 +218,7 @@ var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
         return feature;
     }
 
-    var v = map.getView();
+    var v = map[map_id].getView();
     if (!zoom_level) zoom_level = v.getZoom() + 1;
 
     // center
@@ -221,7 +227,7 @@ var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
     if (zoom_level >= min_auto_zoom_on_cluster){
         animate_in_progress = true;
         v.animate({center: new_center, duration: duration}, animate_end);
-        return display_cluster_detail(feature);
+        return display_cluster_detail(map_id, feature);
     }
 
     // zoom
@@ -237,11 +243,11 @@ var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
     return setTimeout(
         function(){
             // our cluster must be at the center (if it exists after zoom)
-            var pixel = map.getPixelFromCoordinate(v.getCenter());
+            var pixel = map[map_id].getPixelFromCoordinate(v.getCenter());
             var new_feature;
             map.forEachFeatureAtPixel(
                 pixel, function(feat, layer){
-                    if (layer == cluster_layer){
+                    if (layer == cluster_layer[map_id]){
                         new_feature = feat;
                         return true
                     }
@@ -249,10 +255,10 @@ 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);
+                    return display_cluster_detail(map_id, new_feature);
                 }
                 return click_on_cluster(
-                    new_feature, zoom_level + 1, duration, nb_zoom,
+                    map_id, new_feature, zoom_level + 1, duration, nb_zoom,
                     current_nb_items);
             }
             // no more cluster feature here or min auto zoom reach: stop zooming
@@ -262,7 +268,7 @@ var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
 
 /* display info */
 
-var display_cluster_detail = function(cluster){
+var display_cluster_detail = function(map_id, cluster){
     // console.log("display_cluster_detail");
     var features = cluster.getProperties()['features']
     var offset_x = 0;
@@ -270,24 +276,27 @@ var display_cluster_detail = function(cluster){
     if (features.length == 1){
         offset_y = -54;
     }
-    display_items(features, offset_x, offset_y);
+    display_items(map_id, features, offset_x, offset_y);
 };
 
-var display_items = function(features, offset_x, offset_y){
-    wait_animation_end(function() {_display_items(features, offset_x, offset_y)});
+var display_items = function(map_id, features, offset_x, offset_y){
+    wait_animation_end(function() {_display_items(map_id, features, offset_x, offset_y)});
 };
 
-var open_map_window = function(){
-    $('.ishtar-map-window').show();
+var open_map_window = function(map_id){
+    return function(){
+        $('#ishtar-map-window-' + map_id).show();
+    };
 };
 
 var complete_list_label = "complete list...";
 
-var _display_items = function(features, offset_x, offset_y){
+var _display_items = function(map_id, features, offset_x, offset_y){
     // console.log("display_items");
     var feature = features[0];
     var geom = feature.getGeometry();
-    var popup_content = "<ul>";
+    var ul_class = "map-list-" + map_id;
+    var popup_content = "<ul class='" + ul_class + "'>";
     var window_content = "<ul>";
     var has_extra = false;
     for (idx_feat in features){
@@ -298,7 +307,7 @@ var _display_items = function(features, offset_x, offset_y){
         }
         var feat = features[idx_feat];
         var properties = feat.getProperties();
-        var link = link_template.replace("<pk>", properties["id"]);
+        var link = link_template[map_id].replace("<pk>", properties["id"]);
         var txt = "<li>" + link + " " + properties['name'] + "</li>";
         window_content += txt;
         if (idx_feat < 5){
@@ -307,149 +316,151 @@ var _display_items = function(features, offset_x, offset_y){
     }
     popup_content += "</ul>";
     window_content += "</ul>";
-    $(".simple-window-content .modal-body").html(window_content);
-    $(popup_item).html(popup_content);
-    $(".map-list-detail").click(open_map_window);
-    popup.setPosition(geom.getCoordinates());
-    popup.setOffset([offset_x, offset_y]);
-    $(popup_item).css({opacity: 0});
-    $(popup_item).show(0, function(){
+    $("#ishtar-map-window-" + map_id + " .modal-body").html(window_content);
+    $(popup_item[map_id]).html(popup_content);
+    $("." + ul_class + " .map-list-detail").click(open_map_window(map_id));
+    popup[map_id].setPosition(geom.getCoordinates());
+    popup[map_id].setOffset([offset_x, offset_y]);
+    $(popup_item[map_id]).css({opacity: 0});
+    $(popup_item[map_id]).show(0, function(){
         setTimeout(function(){
-            popup.setOffset([offset_x, offset_y]);
-            $(popup_item).css({opacity: 1});
+            popup[map_id].setOffset([offset_x, offset_y]);
+            $(popup_item[map_id]).css({opacity: 1});
         }, 200);
     });
 };
 
 /* hover */
 
-var manage_hover = function(e) {
-    var pixel = map.getEventPixel(e.originalEvent);
-    var feature = map.forEachFeatureAtPixel(
-        e.pixel,
-        function(feature, layer) {
-            return feature;
-        }
-    );
-    var hit = map.hasFeatureAtPixel(pixel);
-    var target = map.getTarget();
-    target = typeof target === "string" ?
-        document.getElementById(target) : target;
-    target.style.cursor = hit ? 'pointer' : '';
+var manage_hover = function(map_id){
+    return function(e) {
+        var pixel = map[map_id].getEventPixel(e.originalEvent);
+        var feature = map[map_id].forEachFeatureAtPixel(
+            e.pixel,
+            function(feature, layer) {
+                return feature;
+            }
+        );
+        var hit = map[map_id].hasFeatureAtPixel(pixel);
+        var target = map[map_id].getTarget();
+        target = typeof target === "string" ?
+            document.getElementById(target) : target;
+        target.style.cursor = hit ? 'pointer' : '';
+    }
 };
 
 /* popup */
 
-var popup;
-var popup_item;
+var popup = {};
+var popup_item = {};
 
-var init_popup = function(){
-    popup_item = document.getElementById("ishtar-map-popup-" + map_id);
+var init_popup = function(map_id){
+    popup_item[map_id] = document.getElementById("ishtar-map-popup-" + map_id);
     var popup_options = {
-        element: popup_item,
+        element: popup_item[map_id],
         positioning: 'bottom-center'
     }
-    popup = new ol.Overlay(popup_options);
-    map.addOverlay(popup);
+    popup[map_id] = new ol.Overlay(popup_options);
+    map[map_id].addOverlay(popup[map_id]);
 };
 
 
 /* display map */
 
 var center;
-var point_features;
-var map;
-var map_id;
-var map_view;
-var map_layers;
+var point_features = {};
+var map = {};
+var map_view = {};
+var map_layers = {};
 var proj_options = {
     dataProjection:'EPSG:4326', featureProjection: view_projection
 }
 var geojson_format = new ol.format.GeoJSON(proj_options);
 var wkt_format = new ol.format.WKT(proj_options);
-var link_template;
-var vector_source;
-var vector_layer;
-var vector_features;
+var link_template = {};
+var vector_source = {};
+var vector_layer = {};
+var vector_features = {};
 
-var initialize_base_map = function(layers){
+var initialize_base_map = function(map_id, layers){
     center = wkt_format.readGeometry(map_default_center).getCoordinates();
 
-    map_layers = get_layers(layers);
+    map_layers[map_id] = get_layers(layers);
 
-    map_view = new ol.View({
+    map_view[map_id] = new ol.View({
         projection: view_projection,
         center: ol.proj.fromLonLat([center[0], center[1]]),
         zoom: map_default_zoom
     });
 
-    map = new ol.Map({
+    map[map_id] = new ol.Map({
         target: map_id,
-        layers: map_layers,
-        view: map_view
+        layers: map_layers[map_id],
+        view: map_view[map_id]
     });
 
 }
 
-var redraw_map = function(layers){
-    map.setTarget(null);
-    map = null;
-    initialize_base_map(layers);
-    reinit_clustering();
+var redraw_map = function(map_id, layers){
+    map[map_id].setTarget(null);
+    map[map_id] = null;
+    initialize_base_map(map_id, layers);
+    reinit_clustering(map_id);
     current_feature = null;
 };
 
 
-var display_map = function(current_map_id, points, lines_and_polys, layers){
+var display_map = function(map_id, points, lines_and_polys, layers){
+
+    base_color_rvb = base_color_R + ', ' + base_color_V + ', ' + base_color_B;
+
     if (points){
-        link_template = points['link_template'];
+        link_template[map_id] = points['link_template'];
     } else {
         /// link_template = lines_and_polys['link_template'];
     }
-    map_id = current_map_id;
-    if (map){
-        redraw_map(layers);
+    if (map[map_id]){
+        redraw_map(map_id, layers);
     } else {
-        initialize_base_map(layers);
+        initialize_base_map(map_id, layers);
     }
-    display_points(points);
-    display_lines_and_polys(lines_and_polys);
+    display_points(map_id, points);
+    display_lines_and_polys(map_id, lines_and_polys);
 
-    init_popup();
+    init_popup(map_id);
 
-    map.on('click', manage_click_on_map);
-    map.on('pointermove', manage_hover);
+    map[map_id].on('click', manage_click_on_map(map_id));
+    map[map_id].on('pointermove', manage_hover(map_id));
 };
 
-var display_points = function(points){
+var display_points = function(map_id, points){
     if (!points) return;
-    point_features = geojson_format.readFeatures(points);
-    enable_clustering();
-    cluster_source.getSource().addFeatures(point_features);
+    point_features[map_id] = geojson_format.readFeatures(points);
+    enable_clustering(map_id);
+    cluster_source[map_id].getSource().addFeatures(point_features[map_id]);
     if (points.features.length){
-        map_view.fit(cluster_source.getSource().getExtent());
-        if (map_view.getZoom() > 12){
-            map_view.setZoom(12);
+        map_view[map_id].fit(cluster_source[map_id].getSource().getExtent());
+        if (map_view[map_id].getZoom() > 12){
+            map_view[map_id].setZoom(12);
         }
     }
 };
 
-var display_lines_and_polys = function(lines_and_polys){
+var display_lines_and_polys = function(map_id, lines_and_polys){
     if (!lines_and_polys) return;
-    vector_features = geojson_format.readFeatures(lines_and_polys);
-    vector_source = new ol.source.Vector();
-    vector_layer = new ol.layer.Vector({
-        source: vector_source,
+    vector_features[map_id] = geojson_format.readFeatures(lines_and_polys);
+    vector_source[map_id] = new ol.source.Vector();
+    vector_source[map_id].addFeatures(vector_features[map_id]);
+    vector_layer[map_id] = new ol.layer.Vector({
+        source: vector_source[map_id],
         style: get_vector_style
     });
-    vector_source.addFeatures(vector_features);
-    vector_source.addFeature(new ol.Feature(
-        new ol.geom.Circle([6.079860710813087, 43.11452983279191], 2))) ;
-    map_layers.push(vector_layer);
+
+    map[map_id].addLayer(vector_layer[map_id]);
     if (lines_and_polys.features.length){
-        map_view.fit(vector_source.getExtent());
-        if (map_view.getZoom() > 12){
-            map_view.setZoom(12);
+        map_view[map_id].fit(vector_source[map_id].getExtent());
+        if (map_view[map_id].getZoom() > 12){
+            map_view[map_id].setZoom(12);
         }
     }
 };
diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index be3374e54..6600181e7 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -1235,11 +1235,27 @@ var register_image_gallery = function(gallery_id){
     $('.tooltip').tooltip('hide');
 };
 
+var item_list_msg = "Item list";
+
+var render_map_list_modal = function(map_id){
+    var html = "";
+    html += '<div id="ishtar-map-window-' + map_id + '" class="ishtar-map-window simple-window" tabindex="-1" aria-hidden="true">';
+    html += '<div class="simple-window-content">';
+    html += '<div class="modal-header">';
+    html += item_list_msg;
+    html += '<button type="button" class="close" ';
+    html += ' onclick="$(\'#ishtar-map-window-' + map_id + '\').hide()" aria-label="Close"> ';
+    html += '<span aria-hidden="true">&times;</span> </button> </div>';
+    html += '<div class="modal-body"> </div> </div> </div>';
+    return html;
+};
+
 var render_map = function(data_table, table_name, nb_select, map_id){
     //var html = render_paginate_select(table_name, 'map', nb_select);
     var html = "";
     html += "<div class='ishtar-table-map' id='" + map_id + "'></div>";
     html += "<div class='ishtar-map-popup' id='ishtar-map-popup-" + map_id + "'></div>";
+    html += render_map_list_modal(map_id);
     return {"points": data_table, "html": html};
 };