Stylize popup

src/Map/MapComponent.jsx

@@ -90,6 +90,7 @@ export const MapComponent = () => {
         longitude: 37.6173,
         zoom: 9,
       }}
+      dragRotate={false}
       ref={mapRef}
       interactiveLayerIds={[pointLayer.id, "grid3", "grid4", "grid5"]}
       onClick={handleClick}

src/Map/Popup.jsx

@@ -1,6 +1,36 @@
 import { Popup } from "react-map-gl";
+import { Col, Row } from "antd";
+import { twMerge } from "tailwind-merge";
+import { TYPE_MAPPER } from "../config";
+
+const pointConfig = [
+  {
+    field: "category",
+    name: "Тип",
+    formatter: (value) => TYPE_MAPPER[value],
+  },
+  {
+    field: "msk_ao",
+    name: "АО",
+  },
+  {
+    field: "msk_rayon",
+    name: "Район",
+  },
+];
+
+const gridConfig = [
+  {
+    field: "rate",
+    name: "Востребованность, у.е.",
+  },
+];
 
 export const MapPopup = ({ feature, lat, lng, onClose }) => {
+  const isPoint = feature.geometry.type === "Point";
+  const config = isPoint ? pointConfig : gridConfig;
+  const layout = isPoint ? [10, 14] : [20, 4];
+
   return (
     <Popup
       longitude={lng}
@@ -9,8 +39,21 @@ export const MapPopup = ({ feature, lat, lng, onClose }) => {
       onClose={onClose}
       closeOnClick={false}
     >
-      <div style={{ color: "red", fontWeight: "bold" }}>
+      <div className={"min-w-[200px]"}>
-        <pre>{JSON.stringify(feature.properties, null, 2)}</pre>
+        {config.map((item) => {
+          const value = feature.properties[item.field];
+
+          return (
+            <Row className={twMerge("p-1")} key={item.field}>
+              <Col span={layout[0]} className={"font-semibold"}>
+                {item.name}
+              </Col>
+              <Col span={layout[1]}>
+                {item.formatter ? item.formatter(value) : value}
+              </Col>
+            </Row>
+          );
+        })}
       </div>
     </Popup>
   );

src/Map/layers-config.js

@@ -8,7 +8,7 @@ const pointColors = {
   kiosk: "#112cda",
   mfc: "#932301",
   library: "#a51eda",
-  dk: "#e7dd24",
+  dk: "#ff5204",
   sport: "#138c44",
 };
 
@@ -35,8 +35,9 @@ export const pointLayer = {
       "black",
     ],
     "circle-radius": 4,
-    "circle-stroke-width": 1,
+    "circle-stroke-width": 0.4,
     "circle-stroke-color": "#fff",
+    "circle-opacity": 0.8,
   },
 };
 

src/config.js

@@ -0,0 +1,7 @@
+export const TYPE_MAPPER = {
+  kiosk: "Городской киоск",
+  mfc: "МФЦ",
+  library: "Библиотека",
+  dk: "Дом культуры и отдыха",
+  sport: "Спортивный объект",
+};

src/index.css

@@ -4,12 +4,12 @@
 
 .mapboxgl-popup-content,
 .maplibregl-popup-content {
-  @apply bg-white-background shadow-lg rounded-md;
+  @apply bg-grey-light shadow-lg rounded-md;
 }
 
 .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
 .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
-  @apply border-t-white-background;
+  @apply border-t-grey-light;
 }
 
 .ant-popover-inner {

src/modules/Sidebar/RatingSlider.jsx

@@ -8,7 +8,7 @@ export const RatingSlider = () => {
 
   return (
     <Slider
-      title={"Востребованность постамата, усл. ед."}
+      title={"Востребованность постамата, у.e."}
       value={rate}
       onAfterChange={handleAfterChange}
       max={10}

src/modules/Sidebar/Sidebar.jsx

@@ -10,7 +10,7 @@ import { Settings } from "./Settings";
 
 export const Sidebar = () => {
   return (
-    <div className="absolute top-10 right-10 bg-white-background w-[300px] rounded-xl p-3">
+    <div className="absolute top-[10px] right-[10px] bg-white-background w-[300px] rounded-xl p-3">
       <Popover
         placement="leftTop"
         title={"Веса факторов"}

tailwind.config.cjs

@@ -5,9 +5,11 @@ module.exports = {
     extend: {
       colors: {
         primary: "#CC2222FF",
+        'primary-light': "#ffc6c6",
         blue: "rgba(167,201,236,0.57)",
         "white-background": "rgba(255, 255, 255, 0.9)",
         grey: "rgba(0,0, 0, 0.5)",
+        "grey-light": "rgba(239,239,239,0.9)",
       },
     },
   },