✨ sheet map: display buffer - 🐛 sheet map: fix 2d point display

1 files changed, 39 insertions, 4 deletions

diff --git a/ishtar_common/static/js/ishtar-map.js b/ishtar_common/static/js/ishtar-map.js
index 394b27feb..3ee41e2d1 100644
--- a/ishtar_common/static/js/ishtar-map.js
+++ b/ishtar_common/static/js/ishtar-map.js
@@ -309,11 +309,43 @@ var cluster_get_style = function(feature, resolution){
     var style = _styleCache[size];
 
     if (!style && size == 1){
-        style = _styleCache[size] = [get_icon_style()];
+        style = new Array();
+        if (ishtar_display_buffer){
+            let _current_feature = feature.getProperties()["features"][0];
+            let _feat_properties = _current_feature.getProperties();
+            let _buffer = _feat_properties["buffer"];
+            if (_buffer){
+                let point_resolution = ol.proj.getPointResolution(
+                    map[_feat_properties["map_id"]].getView().getProjection(), 1,
+                    _current_feature.getGeometry().flatCoordinates
+                );
+                let radius = _buffer * point_resolution / resolution * 2;
+                let color = "255,128,0";
+                style.push(
+                    new ol.style.Style({
+                        image: new ol.style.Circle({
+                            radius: radius,
+                            stroke: new ol.style.Stroke({
+                                color:"rgba("+color+", 0.8)",
+                                width: 2
+                            }),
+                            fill: new ol.style.Fill({
+                                color:"rgba("+color+", 0.5)"
+                            })
+                        })
+                    })
+
+                )
+            }
+        }
+        style.push(get_icon_style());
+        if (!ishtar_display_buffer){
+            _styleCache[size] = style;
+        }
     } else if (!style && size > 1){
-        var color = size > cluster_threshold_2 ? "192,0,0" : size > cluster_threshold_1 ? "255,128,0" : "0,128,0";
-        var radius = Math.max(8, Math.min(size * 0.75, 20));
-        var lbl = size.toString();
+        let color = size > cluster_threshold_2 ? "192,0,0" : size > cluster_threshold_1 ? "255,128,0" : "0,128,0";
+        let radius = Math.max(8, Math.min(size * 0.75, 20));
+        let lbl = size.toString();
         style = _styleCache[size] = [
             new ol.style.Style({
                 image: new ol.style.Circle({
@@ -734,6 +766,8 @@ var display_map = function(map_id, points, lines_and_polys, layers){
     }
 };
 
+var ishtar_display_buffer = false;
+
 var display_points = function(map_id, points){
     if (!points) return;
     point_features[map_id] = geojson_format.readFeatures(points);
@@ -742,6 +776,7 @@ var display_points = function(map_id, points){
     } else {
         reinit_clustering(map_id);
     }
+    point_features[map_id].forEach(function(feat){feat.set("map_id", map_id)});
     cluster_source[map_id].getSource().addFeatures(point_features[map_id]);
 };