From b2d6283f8da514768c5d75cc76181d44e1d7c1c9 Mon Sep 17 00:00:00 2001
From: Max Chepurnoy <max@gisdev.ru>
Date: Sun, 6 Nov 2022 17:20:39 +0300
Subject: [PATCH 1/2] Add legend for point layers

---
 src/Map/MapComponent.jsx       |  3 +++
 src/Map/layers-config.js       |  2 +-
 src/modules/Sidebar/Legend.jsx | 31 +++++++++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/Sidebar/Legend.jsx

diff --git a/src/Map/MapComponent.jsx b/src/Map/MapComponent.jsx
index 1426a2f..7c6a106 100644
--- a/src/Map/MapComponent.jsx
+++ b/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>
   );
 };
diff --git a/src/Map/layers-config.js b/src/Map/layers-config.js
index eb20df8..44a7b47 100644
--- a/src/Map/layers-config.js
+++ b/src/Map/layers-config.js
@@ -4,7 +4,7 @@
 // dk - дома культуры и клубы
 // sport - спортивные объекты
 
-const pointColors = {
+export const pointColors = {
   kiosk: "#112cda",
   mfc: "#932301",
   library: "#a51eda",
diff --git a/src/modules/Sidebar/Legend.jsx b/src/modules/Sidebar/Legend.jsx
new file mode 100644
index 0000000..11724d4
--- /dev/null
+++ b/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>
+  );
+}

From 03f6b4265399c4ec34f8160ebeb0c66d923ba2e0 Mon Sep 17 00:00:00 2001
From: Max Chepurnoy <max@gisdev.ru>
Date: Sun, 6 Nov 2022 17:33:22 +0300
Subject: [PATCH 2/2] Add grid legend

---
 src/modules/Sidebar/Legend.jsx | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/modules/Sidebar/Legend.jsx b/src/modules/Sidebar/Legend.jsx
index 11724d4..2539215 100644
--- a/src/modules/Sidebar/Legend.jsx
+++ b/src/modules/Sidebar/Legend.jsx
@@ -15,14 +15,42 @@ export function Legend() {
       <div className="space-y-5">
         <Title text={"Легенда"} className={"mb-1"} />
 
+        <div className="flex  gap-1 items-center justify-between">
+          <span className="text-sm">Тепловая карта</span>
+
+          <div className="flex">
+            <div
+              className="w-5 h-5 relative"
+              style={{ background: "rgb(204,34,34)" }}
+            >
+              <span className="absolute top-5 left-1">0</span>
+            </div>
+            <div
+              className="w-5 h-5 relative"
+              style={{ background: "rgb(255,221,52)" }}
+            >
+              <span className="absolute top-5 left-1">25</span>
+            </div>
+            <div
+              className="w-5 h-5 relative"
+              style={{ background: "rgb(30,131,42)" }}
+            >
+              <span className="absolute top-5 left-1">40</span>
+            </div>
+          </div>
+        </div>
+
         {types.map((type) => (
-          <div className="flex gap-1 items-center" key={type.id}>
+          <div
+            className="flex gap-1 items-center justify-between"
+            key={type.id}
+          >
+            <span className="text-sm">{type.name}</span>
+
             <span
               className="rounded-xl w-3 h-3 inline-block"
               style={{ backgroundColor: type.color }}
             ></span>
-
-            <span className="text-sm">{type.name}</span>
           </div>
         ))}
       </div>