diff options
Diffstat (limited to 'ishtar_common/static/js/ishtar-map.js')
| -rw-r--r-- | ishtar_common/static/js/ishtar-map.js | 213 |
1 files changed, 74 insertions, 139 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); } |