feat(back): update rallying_point_display function

app/src/components/map/layers/LianeDisplayLayer.tsx

@@ -75,7 +75,7 @@ export const LianeDisplayLayer = ({
           //@ts-ignore
           lineSortKey: ["get", "count"],
           lineCap: "round",
-          lineColor: AppColors.darkBlue,
+          lineColor: AppColors.blue,
           lineWidth: 3
         }}
       />

back/src/Liane/Liane.Service/Scripts/15_clustered_points.sql

@@ -0,0 +1,84 @@
+DROP FUNCTION rallying_point_display;
+
+CREATE OR REPLACE FUNCTION rallying_point_display(z integer, x integer, y integer) RETURNS bytea
+  immutable
+  strict
+  parallel safe
+  language plpgsql
+AS
+$$
+DECLARE
+  mvt                 BYTEA;
+BEGIN
+
+  IF z <= 12 THEN -- clustering only for zoom levels 0-12
+    WITH points AS (
+      SELECT
+        cluster_id,
+        st_centroid(st_union(geom)) AS geom,
+        COUNT(id)                                    AS point_count,
+        ARRAY_AGG(id)                                AS ids
+      FROM
+        (
+          SELECT
+              ST_ClusterKMeans(location, 5) OVER() AS cluster_id,
+              ST_Centroid(location) as geom,
+              id
+          FROM rallying_point
+          WHERE location @ ST_Transform(ST_TileEnvelope(z, x, y), 4326)
+        ) tsub
+      GROUP BY cluster_id
+    ),
+         clusters AS (
+           SELECT ST_AsMVT(tile.*, 'rallying_point_display', 4096, 'geom') AS tile
+           FROM (
+                  SELECT ST_AsMVTGeom(
+                           ST_Transform(geom, 3857),
+                           ST_TileEnvelope(z, x, y),
+                           4096, 64, TRUE) AS geom,
+                         CASE point_count WHEN 1 THEN NULL ELSE point_count END AS point_count,
+                         ids,
+                         rp.id,
+                         rp.label,
+                         rp.type,
+                         rp.address,
+                         rp.zip_code,
+                         rp.city,
+                         rp.place_count,
+                         rp.is_active
+                  FROM points
+                         LEFT JOIN rallying_point rp ON points.point_count = 1 AND rp.id = ANY (points.ids)
+                ) AS tile
+         )
+    SELECT INTO mvt clusters.tile
+    FROM clusters;
+
+    RETURN mvt;
+  ELSE
+    WITH clusters AS (
+           SELECT ST_AsMVT(tile.*, 'rallying_point_display', 4096, 'geom') AS tile
+           FROM (
+                  SELECT ST_AsMVTGeom(
+                           ST_Transform(location, 3857),
+                           ST_TileEnvelope(z, x, y),
+                           4096, 64, TRUE) AS geom,
+                         rp.id,
+                         rp.label,
+                         rp.type,
+                         rp.address,
+                         rp.zip_code,
+                         rp.city,
+                         rp.place_count,
+                         rp.is_active
+                  FROM rallying_point rp
+                  WHERE location @ ST_Transform(ST_TileEnvelope(z, x, y), 4326)
+                ) AS tile
+         )
+    SELECT INTO mvt clusters.tile
+    FROM clusters;
+
+    RETURN mvt;
+  END IF;
+
+END
+$$;

web/src/components/map/layers/LianeDisplayLayer.tsx

@@ -29,7 +29,7 @@ export function LianeDisplayLayer({ date }: LianeDisplayLayerProps) {
         source: "liane_display",
         type: "line",
         paint: {
-          "line-color": "#131870",
+          "line-color": "#0B79F9",
           "line-width": 3
         }
       });

web/src/components/map/layers/RallyingPointsLayer.tsx

@@ -76,7 +76,6 @@ const RPIconLayer = ({
   // Load layer icons
   useEffect(() => {
     map.current?.once("load", () => {
-      // if (!map.current?.getImage("rp_active"))
       map.current?.loadImage("/rp_pink.png", function (error, image) {
         if (error) throw error;
 
@@ -87,7 +86,16 @@ const RPIconLayer = ({
         }
       });
 
-      //  if (!map.current?.getImage("rp_inactive"))
+      map.current?.loadImage("/rp_pink_blank.png", function (error, image) {
+        if (error) throw error;
+
+        if (!image) console.warn("No image found");
+        else {
+          if (!map.current?.getImage("rp_pink_blank")) map.current?.addImage("rp_pink_blank", image);
+          setImages(old => [...old, "rp_pink_blank"]);
+        }
+      });
+
       map.current?.loadImage("/rp_gray.png", function (error, image) {
         if (error) throw error;
 
@@ -100,6 +108,7 @@ const RPIconLayer = ({
     });
     return () => {
       if (map.current?.getImage("rp_active")) map.current?.removeImage("rp_active");
+      if (map.current?.getImage("rp_pink_blank")) map.current?.removeImage("rp_pink_blank");
       if (map.current?.getImage("rp_inactive")) map.current?.removeImage("rp_inactive");
     };
   }, [map]);
@@ -110,12 +119,40 @@ const RPIconLayer = ({
   useEffect(() => {
     //WebLogger.debug(ready, map.current?.getSource("rallying_point_display"), !map.current?.getLayer("rallying_point_display"));
     if (ready && map.current?.getSource("rallying_point_display") && !map.current?.getLayer("rallying_point_display")) {
+      map.current?.addLayer({
+        id: "rallying_point_display_cluster",
+        "source-layer": "rallying_point_display",
+        source: "rallying_point_display",
+        type: "symbol",
+        minzoom: 8,
+        filter: ["has", "point_count"],
+        layout: {
+          "icon-image": "rp_pink_blank",
+          "text-size": 14,
+          "icon-size": ["interpolate", ["linear"], ["zoom"], 7, 0.16, 9, 0.24, 11, 0.36],
+          "text-field": ["get", "point_count"],
+          "text-allow-overlap": false,
+          "icon-allow-overlap": true,
+          "text-anchor": "center",
+          "text-offset": [0, -1.05],
+          "text-max-width": 5.4,
+          "text-optional": true,
+          "icon-optional": false,
+          "icon-anchor": "bottom"
+        },
+        paint: {
+          "text-color": "#ffffff",
+          "text-halo-color": "rgba(255, 255, 255)",
+          "text-halo-width": 0.2
+        }
+      });
       map.current?.addLayer({
         id: "rallying_point_display",
         "source-layer": "rallying_point_display",
         source: "rallying_point_display",
         type: "symbol",
         minzoom: 8,
+        filter: ["!", ["has", "point_count"]],
         layout: {
           "icon-image": "rp_active",
           "text-size": 12,