diff --git a/src/Map/Layers/Layers.jsx b/src/Map/Layers/Layers.jsx index 4063be8..a30bfa5 100644 --- a/src/Map/Layers/Layers.jsx +++ b/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 }) => { @@ -62,7 +62,7 @@ export const Layers = ({ postGroups, otherGroups }) => { diff --git a/src/Map/MapComponent.jsx b/src/Map/MapComponent.jsx index 57f055d..20959f0 100644 --- a/src/Map/MapComponent.jsx +++ b/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 && ( diff --git a/src/stores/useUpdateLayerCounter.js b/src/stores/useUpdateLayerCounter.js index 68f0356..68b857e 100644 --- a/src/stores/useUpdateLayerCounter.js +++ b/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));