icons fix

src/Map/Layers/Layers.jsx

@@ -9,7 +9,7 @@ import {transliterate} from "../../utils.js";
 import {useUpdateLayerCounter} from "../../stores/useUpdateLayerCounter.js";
 
 export const Layers = ({ postGroups, otherGroups }) => {
-  const { updateCounter } = useUpdateLayerCounter();
+  const { updatePVZLayer } = useUpdateLayerCounter();
 
   return (
     <>
@@ -45,7 +45,7 @@ export const Layers = ({ postGroups, otherGroups }) => {
 
       <Source
         id="pvz"
-        key={`pvz-${updateCounter}`}
+        key={`pvz-${updatePVZLayer}`}
         type="vector"
         tiles={[`${BASE_URL}/martin/public.service_post_and_pvz/{z}/{x}/{y}.pbf`]}
       >
@@ -62,7 +62,7 @@ export const Layers = ({ postGroups, otherGroups }) => {
 
       <Source
         id="other"
-        key={`other-${updateCounter}`}
+        key={`other-${updatePVZLayer}`}
         type="vector"
         tiles={[`${BASE_URL}/martin/public.service_otherobjects/{z}/{x}/{y}.pbf`]}
       >

src/Map/MapComponent.jsx

@@ -29,6 +29,7 @@ import {
   RANGE_FILTERS_KEYS,
   RANGE_FILTERS_MAP
 } from "../stores/usePendingPointsFilters.js";
+import { useUpdateLayerCounter } from "../stores/useUpdateLayerCounter.js";
 
 export const MapComponent = () => {
   const mapRef = useRef(null);
@@ -39,6 +40,7 @@ export const MapComponent = () => {
   const { setLayersVisibility } = useLayersVisibility();
   const { mode } = useMode();
   const { tableState, openTable } = useTable();
+  const { toggleUpdatePVZLayer } = useUpdateLayerCounter();
 
   const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups();
   const { data: otherGroups } = useOtherGroups();
@@ -62,6 +64,23 @@ export const MapComponent = () => {
     return [...res, ...icons];
   }, [icons, filteredPostamatesGroups, filteredOtherGroups]);
 
+  useEffect(() => {
+    mapIcons.map((icon) => {
+      const img = new Image(
+        icon.size?.width || 64,
+        icon.size?.height || 64
+      );
+      img.src = icon.url;
+      img.crossOrigin = "Anonymous";
+      img.onload = () => {
+        mapRef.current.addImage(icon.name, img);
+        toggleUpdatePVZLayer();
+      }
+      img.src = icon.url;
+      img.crossOrigin = "Anonymous";
+    });
+  }, [mapIcons]);
+
   const mapLayersIds = useMemo(() => {
     const res = []
 
@@ -189,20 +208,6 @@ export const MapComponent = () => {
               onClick={handleClick}
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
-              onLoad={() => {
-                mapIcons.map((icon) => {
-                  const img = new Image(
-                    icon.size?.width || 64,
-                    icon.size?.height || 64
-                  );
-                  img.src = icon.url;
-                  img.crossOrigin = "Anonymous";
-                  img.onload = () =>
-                    mapRef.current.addImage(icon.name, img);
-                  img.src = icon.url;
-                  img.crossOrigin = "Anonymous";
-                });
-              }}
               id="map"
             >
               {popup && (

src/stores/useUpdateLayerCounter.js

@@ -3,12 +3,19 @@ import { immer } from "zustand/middleware/immer";
 
 const store = (set) => ({
   updateCounter: -1,
+  updatePVZLayer: -1,
 
   toggleUpdateCounter: () => {
     set((state) => {
       state.updateCounter = state.updateCounter === -1 ? 1 : -1;
     });
   },
+
+  toggleUpdatePVZLayer: () => {
+    set((state) => {
+      state.updatePVZLayer = state.updatePVZLayer === -1 ? 1 : -1;
+    });
+  },
 });
 
 export const useUpdateLayerCounter = create(immer(store));