Toggle layer visibility

package.json

@@ -10,13 +10,15 @@
   },
   "dependencies": {
     "antd": "^4.23.6",
+    "immer": "^9.0.16",
     "mapbox-gl": "npm:empty-npm-package@1.0.0",
     "maplibre-gl": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.6.0",
     "react-map-gl": "^7.0.19",
-    "tailwind-merge": "^1.7.0"
+    "tailwind-merge": "^1.7.0",
+    "zustand": "^4.1.3"
   },
   "devDependencies": {
     "@types/react": "^18.0.22",

src/Map/Layers.jsx

@@ -1,7 +1,15 @@
 import { Layer, Source } from "react-map-gl";
 import { gridLayer, pointLayer } from "./layers-config";
+import {
+  getGridVisibility,
+  getPointsVisibility,
+  useLayersStore,
+} from "../stores/useLayersStore";
 
 export const Layers = () => {
+  const isPointsVisible = useLayersStore(getPointsVisibility);
+  const isGridVisible = useLayersStore(getGridVisibility);
+
   return (
     <>
       <Source
@@ -11,7 +19,13 @@ export const Layers = () => {
           "https://business.spatiality.website/martin/public.service_polygon/{z}/{x}/{y}.pbf",
         ]}
       >
-        <Layer {...gridLayer} />
+        <Layer
+          {...gridLayer}
+          layout={{
+            ...gridLayer.layout,
+            visibility: isGridVisible ? "visible" : "none",
+          }}
+        />
       </Source>
       <Source
         id="points"
@@ -20,7 +34,13 @@ export const Layers = () => {
           "https://business.spatiality.website/martin/public.service_point/{z}/{x}/{y}.pbf",
         ]}
       >
-        <Layer {...pointLayer} />
+        <Layer
+          {...pointLayer}
+          layout={{
+            ...pointLayer.layout,
+            visibility: isPointsVisible ? "visible" : "none",
+          }}
+        />
       </Source>
     </>
   );

src/Map/layers-config.js

@@ -3,6 +3,7 @@ export const pointLayer = {
   type: "circle",
   source: "points",
   "source-layer": "public.service_point",
+  layout: {},
   paint: {
     "circle-color": "#da11b2",
     "circle-radius": 4,

src/modules/Sidebar/LayersVisibility.jsx

@@ -0,0 +1,34 @@
+import { Title } from "../../components/Title";
+import { Checkbox } from "antd";
+import {
+  getGridVisibility,
+  getPointsVisibility,
+  useLayersStore,
+} from "../../stores/useLayersStore";
+
+export const LayersVisibility = () => {
+  const { toggleVisibility } = useLayersStore();
+  const isPointsVisible = useLayersStore(getPointsVisibility);
+  const isGridVisible = useLayersStore(getGridVisibility);
+
+  return (
+    <div>
+      <Title text={"Слои"} className={"mb-1"} />
+      <div className={"space-y-1"}>
+        <Checkbox
+          onChange={() => toggleVisibility("points")}
+          checked={isPointsVisible}
+        >
+          Точки постаматов
+        </Checkbox>
+        <Checkbox
+          className={"!ml-0"}
+          onChange={() => toggleVisibility("grid")}
+          checked={isGridVisible}
+        >
+          Тепловая карта
+        </Checkbox>
+      </div>
+    </div>
+  );
+};

src/modules/Sidebar/Sidebar.jsx

@@ -1,8 +1,9 @@
 import { RegionSelect } from "./RegionSelect";
-import { Button, Checkbox } from "antd";
+import { Button } from "antd";
 import { BsChevronLeft } from "react-icons/bs";
 import { ObjectTypesSelect } from "./ObjectTypesSelect";
 import { RatingSlider } from "./RatingSlider";
+import { LayersVisibility } from "./LayersVisibility";
 
 export const Sidebar = () => {
   return (
@@ -14,10 +15,11 @@ export const Sidebar = () => {
       >
         Настройки
       </Button>
+
       <div className="space-y-5">
+        <LayersVisibility />
         <RegionSelect />
         <ObjectTypesSelect />
-        <Checkbox>Тепловая карта</Checkbox>
         <RatingSlider />
         <div className="flex items-center space-x-2">
           <Button type="primary">Экспорт данных</Button>

src/stores/useLayersStore.js

@@ -0,0 +1,29 @@
+import create from "zustand";
+import { immer } from "zustand/middleware/immer";
+
+const INITIAL_STATE = {
+  points: {
+    visible: true,
+    filter: {},
+  },
+  grid: {
+    visible: true,
+    filter: {},
+  },
+};
+
+const store = (set) => ({
+  layers: INITIAL_STATE,
+  toggleVisibility: (layerId) =>
+    set((state) => {
+      state.layers[layerId].visible = !state.layers[layerId].visible;
+    }),
+});
+
+export const useLayersStore = create(immer(store));
+
+export const getLayerVisibility = (layerId) => (state) =>
+  state.layers[layerId].visible;
+
+export const getPointsVisibility = getLayerVisibility("points");
+export const getGridVisibility = getLayerVisibility("grid");

yarn.lock

@@ -992,6 +992,11 @@ ieee754@^1.1.12:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
+immer@^9.0.16:
+  version "9.0.16"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.16.tgz#8e7caab80118c2b54b37ad43e05758cdefad0198"
+  integrity sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ==
+
 ini@^1.3.5:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
@@ -1881,6 +1886,11 @@ update-browserslist-db@^1.0.9:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -1923,3 +1933,10 @@ yaml@^1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+zustand@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.1.3.tgz#72bc4c0ed8ed906fbd92c7c20cde8dd6114c018f"
+  integrity sha512-AdFyr6+4sVD6xlyc/ArQaOrleqzxJEBbAXglufZ5lgvisoz8GUN3icOrKOnX1uRSxmpmdVUQPen9hhymWIzhBg==
+  dependencies:
+    use-sync-external-store "1.2.0"