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 = () => { - + - +