layer images

src/Map/Layers/Layers.jsx

@@ -6,7 +6,7 @@ import { PVZ } from "./PVZ";
 import { OtherPostamates } from "./OtherPostamates";
 import { SelectedRegion } from "./SelectedRegion";
 
-export const Layers = () => {
+export const Layers = ({ postGroups }) => {
   return (
     <>
       <Source
@@ -42,7 +42,9 @@ export const Layers = () => {
         type="vector"
         tiles={[`${BASE_URL}/martin/public.service_post_and_pvz/{z}/{x}/{y}.pbf`]}
       >
-        <PVZ />
+        {postGroups && postGroups.map((item) => {
+          return item.groups.map((itemGroup) => <PVZ id={itemGroup.id} categoryId={itemGroup.category} />);
+        })}
       </Source>
 
       <Source

src/Map/Layers/PVZ.jsx

@@ -1,21 +1,24 @@
 import { Layer } from "react-map-gl";
-import { pvzPointLayer } from "./layers-config";
+import { getPointSymbolLayer } from "./layers-config";
 import { useLayersVisibility } from "../../stores/useLayersVisibility";
 import { LAYER_IDS } from "./constants";
 
-export const PVZ = () => {
+export const PVZ = ({id, categoryId}) => {
   const { isVisible } = useLayersVisibility();
+  const filter = ["==", ["get", "group_id"], id]
 
   return (
     <>
       <Layer
-        {...pvzPointLayer}
-        id={LAYER_IDS.pvz}
+        {...getPointSymbolLayer(String(id))}
+        id={LAYER_IDS.pvz + id}
         source={"pvz"}
         source-layer={"public.service_post_and_pvz"}
         layout={{
-          visibility: isVisible[LAYER_IDS.pvz] ? "visible" : "none",
+          ...getPointSymbolLayer(String(id)).layout,
+          visibility: isVisible[LAYER_IDS.pvz_category + categoryId] ? "visible" : "none",
         }}
+        filter={filter}
       />
     </>
   );

src/Map/Layers/constants.js

@@ -10,5 +10,6 @@ export const LAYER_IDS = {
   cancelled: "cancelled-points",
   atd: "atd",
   pvz: "pvz",
+  pvz_category: "pvz_category",
   other: "other",
 };

src/Map/Layers/layers-config.js

@@ -68,6 +68,16 @@ export const workingPointSymbolLayer = {
   },
 };
 
+export const getPointSymbolLayer = (image) => {
+  return {
+    type: "symbol",
+    layout: {
+      "icon-image": image,
+      "icon-size": ["interpolate", ["linear"], ["zoom"], 3, 0, 9, 0.1, 13, 0.7],
+    },
+  };
+}
+
 const workingBgColor = "#ffffff";
 const workingBgSize = 16;
 export const workingPointBackgroundLayer = {

src/Map/LayersControl/LayersControl.jsx

@@ -2,10 +2,10 @@ import { Button, Popover, Tooltip } from "antd";
 import { BiLayer } from "react-icons/all";
 import { LayersVisibility } from "./LayersVisibility";
 
-export const LayersControl = () => {
+export const LayersControl = ({postGroups}) => {
   return (
     <Popover
-      content={<LayersVisibility />}
+      content={<LayersVisibility postGroups={postGroups} />}
       trigger="click"
       placement={"leftBottom"}
     >

src/Map/LayersControl/LayersVisibility.jsx

@@ -4,7 +4,7 @@ import Checkbox from "antd/es/checkbox/Checkbox";
 import { MODES } from "../../config";
 import { LAYER_IDS } from "../Layers/constants";
 
-export const LayersVisibility = () => {
+export const LayersVisibility = ({postGroups}) => {
   const { toggleVisibility, isVisible } = useLayersVisibility();
   const { mode } = useMode();
 
@@ -28,13 +28,18 @@ export const LayersVisibility = () => {
           </Checkbox>
         </>
       )}
-      <Checkbox
-        className={"!ml-0"}
-        onChange={() => toggleVisibility(LAYER_IDS.pvz)}
-        checked={isVisible[LAYER_IDS.pvz]}
-      >
-        ПВЗ
-      </Checkbox>
+      {postGroups && postGroups.map((item) => {
+        return (
+          <Checkbox
+            className={"!ml-0"}
+            onChange={() => toggleVisibility(LAYER_IDS.pvz_category + item.id)}
+            checked={isVisible[LAYER_IDS.pvz_category + item.id]}
+          >
+            {item.name}
+          </Checkbox>
+        );
+      })}
+
       <Checkbox
         className={"!ml-0"}
         onChange={() => toggleVisibility(LAYER_IDS.other)}

src/Map/MapComponent.jsx

@@ -1,6 +1,6 @@
 import maplibregl from "maplibre-gl";
 import Map, { MapProvider } from "react-map-gl";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Sidebar } from "../modules/Sidebar/Sidebar";
 import { Layers } from "./Layers/Layers";
 import { MapPopup } from "./Popup/Popup";
@@ -22,6 +22,7 @@ import { LAYER_IDS } from "./Layers/constants";
 import { Header } from "./Header";
 import { icons } from "../icons/icons-config";
 import { LastMLRun } from "./LastMLRun";
+import { usePostamatesAndPvzGroups } from "../api.js";
 
 export const MapComponent = () => {
   const mapRef = useRef(null);
@@ -33,6 +34,30 @@ export const MapComponent = () => {
   const { mode } = useMode();
   const { tableState, openTable } = useTable();
 
+  const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups();
+
+  const mapIcons = useMemo(() => {
+    if (!postamatesAndPvzGroups) return icons;
+    const res = []
+    postamatesAndPvzGroups.map((item) => {
+      item.groups.map((groupItem) => {
+        res.push({name: groupItem.id, url: groupItem.image})
+      })
+    });
+    return [...res, ...icons];
+  }, [icons, postamatesAndPvzGroups]);
+
+  const mapLayersIds = useMemo(() => {
+    if (!postamatesAndPvzGroups) return [];
+    const res = []
+    postamatesAndPvzGroups.map((item) => {
+      item.groups.map((groupItem) => {
+        res.push(LAYER_IDS.pvz + groupItem.id);
+      })
+    });
+    return res;
+  }, [postamatesAndPvzGroups]);
+
   useEffect(() => {
     setLayersVisibility(MODE_TO_LAYER_VISIBILITY_MAPPER[mode]);
     setPopup(null);
@@ -132,21 +157,22 @@ export const MapComponent = () => {
                 LAYER_IDS.working,
                 LAYER_IDS.filteredWorking,
                 LAYER_IDS.cancelled,
-                LAYER_IDS.pvz,
+                ...mapLayersIds,
                 LAYER_IDS.other,
               ]}
               onClick={handleClick}
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
               onLoad={() => {
-                icons.map((icon) => {
+                mapIcons.map((icon) => {
                   const img = new Image(
                     icon.size?.width || 24,
                     icon.size?.height || 24
                   );
                   img.onload = () =>
-                    mapRef.current.addImage(icon.name, img, { sdf: true });
+                    mapRef.current.addImage(icon.name, img);
                   img.src = icon.url;
+                  img.crossOrigin = "Anonymous";
                 });
               }}
               id="map"
@@ -166,12 +192,12 @@ export const MapComponent = () => {
               <SidebarControl toggleCollapse={toggleCollapseSidebar} />
 
               <Basemap />
-              <Layers />
+              <Layers postGroups={postamatesAndPvzGroups} />
 
               <Legend />
               <LastMLRun />
               <SignOut />
-              <LayersControl />
+              <LayersControl postGroups={postamatesAndPvzGroups} />
             </Map>
           </div>
           <div className="w-full border-solid border-border border-0 border-t-[1px] z-20">