diff options
Diffstat (limited to 'ishtar_common/static/js')
| -rw-r--r-- | ishtar_common/static/js/ishtar-map.js | 253 | ||||
| -rw-r--r-- | ishtar_common/static/js/ishtar.js | 16 |
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">×</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}; }; |