Add legend for point layers

src/Map/MapComponent.jsx

@@ -6,6 +6,7 @@ import { Layers } from "./Layers";
 import { MapPopup } from "./Popup";
 import { MaplibreExportControl } from "@watergis/maplibre-gl-export";
 import { Basemap } from "./Basemap";
+import { Legend } from "../modules/Sidebar/Legend";
 
 const ruTranslation = {
   PageSize: "Размер",
@@ -150,6 +151,8 @@ export const MapComponent = () => {
       <Layers />
 
       <Sidebar />
+
+      <Legend />
     </Map>
   );
 };

src/Map/layers-config.js

@@ -4,7 +4,7 @@
 // dk - дома культуры и клубы
 // sport - спортивные объекты
 
-const pointColors = {
+export const pointColors = {
   kiosk: "#112cda",
   mfc: "#932301",
   library: "#a51eda",

src/modules/Sidebar/Legend.jsx

@@ -0,0 +1,31 @@
+import { Title } from "../../components/Title";
+import { pointColors } from "../../Map/layers-config";
+
+const types = [
+  { color: pointColors.kiosk, id: "kiosk", name: "Городские киоски" },
+  { color: pointColors.mfc, id: "mfc", name: "МФЦ" },
+  { color: pointColors.library, id: "library", name: "Библиотеки" },
+  { color: pointColors.dk, id: "dk", name: "Дома культуры и клубы" },
+  { color: pointColors.sport, id: "sport", name: "Спортивные объекты" },
+];
+
+export function Legend() {
+  return (
+    <div className="absolute bottom-[10px] left-[10px] bg-white-background w-[300px] rounded-xl p-3 max-h-[calc(100vh-30px)] overflow-y-auto">
+      <div className="space-y-5">
+        <Title text={"Легенда"} className={"mb-1"} />
+
+        {types.map((type) => (
+          <div className="flex gap-1 items-center" key={type.id}>
+            <span
+              className="rounded-xl w-3 h-3 inline-block"
+              style={{ backgroundColor: type.color }}
+            ></span>
+
+            <span className="text-sm">{type.name}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}