diff --git a/src/Map/Layers/Layers.jsx b/src/Map/Layers/Layers.jsx
index 63d1ec8..e894128 100644
--- a/src/Map/Layers/Layers.jsx
+++ b/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 (
<>
{
type="vector"
tiles={[`${BASE_URL}/martin/public.service_post_and_pvz/{z}/{x}/{y}.pbf`]}
>
-
+ {postGroups && postGroups.map((item) => {
+ return item.groups.map((itemGroup) => );
+ })}
{
+export const PVZ = ({id, categoryId}) => {
const { isVisible } = useLayersVisibility();
+ const filter = ["==", ["get", "group_id"], id]
return (
<>
>
);
diff --git a/src/Map/Layers/constants.js b/src/Map/Layers/constants.js
index dc4b6b9..5e7593a 100644
--- a/src/Map/Layers/constants.js
+++ b/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",
};
diff --git a/src/Map/Layers/layers-config.js b/src/Map/Layers/layers-config.js
index acaa7bb..732a4d8 100644
--- a/src/Map/Layers/layers-config.js
+++ b/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 = {
diff --git a/src/Map/LayersControl/LayersControl.jsx b/src/Map/LayersControl/LayersControl.jsx
index 2e05a5b..451265a 100644
--- a/src/Map/LayersControl/LayersControl.jsx
+++ b/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 (
}
+ content={}
trigger="click"
placement={"leftBottom"}
>
diff --git a/src/Map/LayersControl/LayersVisibility.jsx b/src/Map/LayersControl/LayersVisibility.jsx
index 85a8335..41bc1e4 100644
--- a/src/Map/LayersControl/LayersVisibility.jsx
+++ b/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 = () => {
>
)}
- toggleVisibility(LAYER_IDS.pvz)}
- checked={isVisible[LAYER_IDS.pvz]}
- >
- ПВЗ
-
+ {postGroups && postGroups.map((item) => {
+ return (
+ toggleVisibility(LAYER_IDS.pvz_category + item.id)}
+ checked={isVisible[LAYER_IDS.pvz_category + item.id]}
+ >
+ {item.name}
+
+ );
+ })}
+
toggleVisibility(LAYER_IDS.other)}
diff --git a/src/Map/MapComponent.jsx b/src/Map/MapComponent.jsx
index 139985b..7b5fad3 100644
--- a/src/Map/MapComponent.jsx
+++ b/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 = () => {
-
+
-
+