map fixes

src/Map/Layers/Layers.jsx

@@ -5,8 +5,9 @@ import { BASE_URL } from "../../api";
 import { PVZ } from "./PVZ";
 import { OtherPostamates } from "./OtherPostamates";
 import { SelectedRegion } from "./SelectedRegion";
+import { transliterate } from "../../utils.js";
 
-export const Layers = ({ postGroups }) => {
+export const Layers = ({ postGroups, otherGroups }) => {
   return (
     <>
       <Source
@@ -43,7 +44,13 @@ export const Layers = ({ postGroups }) => {
         tiles={[`${BASE_URL}/martin/public.service_post_and_pvz/{z}/{x}/{y}.pbf`]}
       >
         {postGroups && postGroups.map((item) => {
-          return item.groups.map((itemGroup) => <PVZ id={itemGroup.id} categoryId={itemGroup.category} />);
+          return item.groups.map((itemGroup) =>
+            <PVZ
+              id={itemGroup.id}
+              categoryId={itemGroup.category}
+              name={transliterate(itemGroup.name)}
+            />
+          );
         })}
       </Source>
 
@@ -52,7 +59,15 @@ export const Layers = ({ postGroups }) => {
         type="vector"
         tiles={[`${BASE_URL}/martin/public.service_otherobjects/{z}/{x}/{y}.pbf`]}
       >
-        <OtherPostamates />
+        {otherGroups && otherGroups.map((item) => {
+          return item.groups.map((itemGroup) =>
+            <OtherPostamates
+              id={itemGroup.id}
+              categoryId={itemGroup.category}
+              name={transliterate(itemGroup.name)}
+            />
+          );
+        })}
       </Source>
 
 

src/Map/Layers/OtherPostamates.jsx

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

src/Map/Layers/PVZ.jsx

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

src/Map/Layers/constants.js

@@ -11,5 +11,6 @@ export const LAYER_IDS = {
   atd: "atd",
   pvz: "pvz",
   pvz_category: "pvz_category",
+  other_category: "other_category",
   other: "other",
 };

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 = ({postGroups}) => {
+export const LayersControl = ({ postGroups, otherGroups }) => {
   return (
     <Popover
-      content={<LayersVisibility postGroups={postGroups} />}
+      content={<LayersVisibility postGroups={postGroups} otherGroups={otherGroups} />}
       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 = ({postGroups}) => {
+export const LayersVisibility = ({ postGroups, otherGroups }) => {
   const { toggleVisibility, isVisible } = useLayersVisibility();
   const { mode } = useMode();
 
@@ -31,6 +31,7 @@ export const LayersVisibility = ({postGroups}) => {
       {postGroups && postGroups.map((item) => {
         return (
           <Checkbox
+            key={item.id}
             className={"!ml-0"}
             onChange={() => toggleVisibility(LAYER_IDS.pvz_category + item.id)}
             checked={isVisible[LAYER_IDS.pvz_category + item.id]}
@@ -40,13 +41,19 @@ export const LayersVisibility = ({postGroups}) => {
         );
       })}
 
-      <Checkbox
+      {otherGroups && otherGroups.map((item) => {
-        className={"!ml-0"}
+        return (
-        onChange={() => toggleVisibility(LAYER_IDS.other)}
+          <Checkbox
-        checked={isVisible[LAYER_IDS.other]}
+            key={item.id}
-      >
+            className={"!ml-0"}
-        Постаматы прочих сетей
+            onChange={() => toggleVisibility(LAYER_IDS.other_category + item.id)}
-      </Checkbox>
+            checked={isVisible[LAYER_IDS.other_category + item.id]}
+          >
+            {item.name}
+          </Checkbox>
+        );
+      })}
+
       {/*{mode === MODES.WORKING && (*/}
       {/*  <>*/}
       {/*    <Checkbox*/}

src/Map/Legend.jsx

@@ -7,7 +7,6 @@ import {
   PENDING_COLOR, PVZ_COLOR,
 } from "./Layers/layers-config";
 import {Logo} from "../icons/Logo.jsx";
-import {useOtherGroups, usePostamatesAndPvzGroups} from "../api.js";
 import {Collapse, Image} from "antd";
 import React from "react";
 
@@ -83,10 +82,8 @@ const LegendGroupItem = ({item, color}) => {
   )
 }
 
-export function Legend() {
+export function Legend({ postGroups, otherGroups }) {
   const {mode} = useMode();
-  const {data: postamatesAndPvzGroups} = usePostamatesAndPvzGroups();
-  const {data: otherGroups} = useOtherGroups();
 
   return (
     <div
@@ -128,7 +125,7 @@ export function Legend() {
       </div>
 
       <div className="space-y-1">
-        {postamatesAndPvzGroups && postamatesAndPvzGroups?.map((item) => {
+        {postGroups && postGroups?.map((item) => {
           return <LegendGroupItem key={item.id} item={item} color={PVZ_COLOR}/>
         })}
       </div>

src/Map/MapComponent.jsx

@@ -22,7 +22,8 @@ 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";
+import {useOtherGroups, usePostamatesAndPvzGroups} from "../api.js";
+import {transliterate} from "../utils.js";
 
 export const MapComponent = () => {
   const mapRef = useRef(null);
@@ -35,28 +36,67 @@ export const MapComponent = () => {
   const { tableState, openTable } = useTable();
 
   const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups();
+  const { data: otherGroups } = useOtherGroups();
+
+  const filteredPostamatesGroups = useMemo(() => {
+    if (!postamatesAndPvzGroups) return [];
+    return postamatesAndPvzGroups
+      .filter((category) => category.visible)
+      .map((category) => {
+        return {
+          ...category,
+          groups: [...category.groups.filter((group) => group.visible)],
+        }
+      })
+  }, [postamatesAndPvzGroups]);
+
+  const filteredOtherGroups = useMemo(() => {
+    if (!otherGroups) return [];
+    return otherGroups
+      .filter((category) => !category.visible)
+      .map((category) => {
+        return {
+          ...category,
+          groups: [...category.groups.filter((group) => group.visible)],
+        }
+      })
+  }, [otherGroups]);
 
   const mapIcons = useMemo(() => {
-    if (!postamatesAndPvzGroups) return icons;
+    const res = [];
-    const res = []
+
-    postamatesAndPvzGroups.map((item) => {
+    filteredPostamatesGroups.map((category) => {
-      item.groups.map((groupItem) => {
+      category.groups.map((group) => {
-        res.push({name: groupItem.id, url: groupItem.image})
+        res.push({name: transliterate(group.name + group.id), url: group.image})
       })
     });
+
+    filteredOtherGroups.map((category) => {
+      category.groups.map((group) => {
+        res.push({name: transliterate(group.name + group.id), url: group.image})
+      })
+    });
+
     return [...res, ...icons];
-  }, [icons, postamatesAndPvzGroups]);
+  }, [icons, filteredPostamatesGroups, filteredOtherGroups]);
 
   const mapLayersIds = useMemo(() => {
-    if (!postamatesAndPvzGroups) return [];
     const res = []
-    postamatesAndPvzGroups.map((item) => {
+
+    filteredPostamatesGroups.map((item) => {
       item.groups.map((groupItem) => {
         res.push(LAYER_IDS.pvz + groupItem.id);
       })
     });
+
+    filteredOtherGroups.map((item) => {
+      item.groups.map((groupItem) => {
+        res.push(LAYER_IDS.other + groupItem.id);
+      })
+    });
+
     return res;
-  }, [postamatesAndPvzGroups]);
+  }, [filteredPostamatesGroups, filteredOtherGroups]);
 
   useEffect(() => {
     setLayersVisibility(MODE_TO_LAYER_VISIBILITY_MAPPER[mode]);
@@ -158,7 +198,6 @@ export const MapComponent = () => {
                 LAYER_IDS.filteredWorking,
                 LAYER_IDS.cancelled,
                 ...mapLayersIds,
-                LAYER_IDS.other,
               ]}
               onClick={handleClick}
               onMouseEnter={handleMouseEnter}
@@ -192,12 +231,12 @@ export const MapComponent = () => {
               <SidebarControl toggleCollapse={toggleCollapseSidebar} />
 
               <Basemap />
-              <Layers postGroups={postamatesAndPvzGroups} />
+              <Layers postGroups={filteredPostamatesGroups} otherGroups={filteredOtherGroups} />
 
-              <Legend />
+              <Legend postGroups={filteredPostamatesGroups} otherGroups={filteredOtherGroups} />
               <LastMLRun />
               <SignOut />
-              <LayersControl postGroups={postamatesAndPvzGroups} />
+              <LayersControl postGroups={filteredPostamatesGroups} otherGroups={filteredOtherGroups} />
             </Map>
           </div>
           <div className="w-full border-solid border-border border-0 border-t-[1px] z-20">

src/Map/Popup/mode-popup/FeatureProperties.jsx

@@ -15,9 +15,11 @@ export const FeatureProperties = ({ feature, dynamicStatus, postamatId }) => {
   const { data } = useGetRegions();
   const isResidential = feature.properties.category === CATEGORIES.residential;
   const isWorking = feature.properties.status === STATUSES.working;
+
   const isRivals =
     feature.layer?.id === LAYER_IDS.pvz ||
-    feature.layer?.id === LAYER_IDS.other;
+    feature.layer?.id === LAYER_IDS.other ||
+    feature.layer?.id.includes(LAYER_IDS.pvz);
 
   const getConfig = () => {
     if (isRivals) {

src/utils.js

@@ -11,5 +11,13 @@ export function download(filename, data) {
   document.body.removeChild(downloadLink);
 }
 
+var chars = {"Ё":"YO","Й":"I","Ц":"TS","У":"U","К":"K","Е":"E","Н":"N","Г":"G","Ш":"SH","Щ":"SCH","З":"Z","Х":"H","Ъ":"'","ё":"yo","й":"i","ц":"ts","у":"u","к":"k","е":"e","н":"n","г":"g","ш":"sh","щ":"sch","з":"z","х":"h","ъ":"'","Ф":"F","Ы":"I","В":"V","А":"A","П":"P","Р":"R","О":"O","Л":"L","Д":"D","Ж":"ZH","Э":"E","ф":"f","ы":"i","в":"v","а":"a","п":"p","р":"r","о":"o","л":"l","д":"d","ж":"zh","э":"e","Я":"Ya","Ч":"CH","С":"S","М":"M","И":"I","Т":"T","Ь":"'","Б":"B","Ю":"YU","я":"ya","ч":"ch","с":"s","м":"m","и":"i","т":"t","ь":"'","б":"b","ю":"yu"," ":""};
+
+export function transliterate(word){
+  return word.split('').map(function (char) {
+    return chars[char] || char;
+  }).join("");
+}
+
 export const isNil = (value) =>
   value === undefined || value === null || value === "";