Style slider

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@watergis/maplibre-gl-export": "^1.3.7",
     "antd": "^4.23.6",
     "immer": "^9.0.16",
     "mapbox-gl": "npm:empty-npm-package@1.0.0",

src/Map/MapComponent.jsx

@@ -1,13 +1,28 @@
 import maplibregl from "maplibre-gl";
-import Map from "react-map-gl";
+import Map, { useControl } from "react-map-gl";
 import { useRef, useState } from "react";
 import { Sidebar } from "../modules/Sidebar/Sidebar";
 import { gridLayer, pointLayer } from "./layers-config";
 import { Layers } from "./Layers";
 import { MapPopup } from "./Popup";
+import {
+  DPI,
+  Format,
+  MaplibreExportControl,
+  PageOrientation,
+  Size,
+} from "@watergis/maplibre-gl-export";
 
 const MAP_TILER_KEY = "hE7PBueqYiS7hKSYUXP9";
 
+const ExportControl = (props) => {
+  useControl(() => new MaplibreExportControl(props), {
+    position: props.position,
+  });
+
+  return null;
+};
+
 export const MapComponent = () => {
   const mapRef = useRef(null);
   const [clickedFeature, setClickedFeature] = useState(null);
@@ -65,6 +80,15 @@ export const MapComponent = () => {
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
+      <ExportControl
+        position="top-left"
+        PageSize={Size.A3}
+        PageOrientation={PageOrientation.Portrait}
+        Format={Format.PNG}
+        DPI={DPI[96]}
+        Crosshair={true}
+        PrintableArea={true}
+      />
       {clickedFeature && popupCoordinates && (
         <MapPopup
           lat={popupCoordinates[1]}

src/index.css

@@ -11,3 +11,7 @@
 .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
   @apply border-t-white-background;
 }
+
+.ant-slider-with-marks {
+  @apply mb-9;
+}

src/modules/Sidebar/LayersVisibility.jsx

@@ -19,8 +19,9 @@ export const LayersVisibility = () => {
           onChange={() => toggleVisibility("points")}
           checked={isPointsVisible}
         >
-          Точки постаматов
+          Точки размещения постаматов
         </Checkbox>
+
         <Checkbox
           className={"!ml-0"}
           onChange={() => toggleVisibility("grid")}

src/modules/Sidebar/RatingSlider.jsx

@@ -1,14 +1,34 @@
 import { Slider } from "antd";
 import { Title } from "../../components/Title";
+import { useState } from "react";
+
+const Mark = ({ value }) => {
+  return <span className={"text-grey text-xs"}>{value}</span>;
+};
+
+const fullRangeMarks = { 0: <Mark value={0} />, 100: <Mark value={100} /> };
 
 export const RatingSlider = () => {
+  const [marks, setMarks] = useState(fullRangeMarks);
+
+  const handleAfterChange = (range) => {
+    const [min, max] = range;
+    setMarks({
+      ...fullRangeMarks,
+      [min]: <Mark value={min} />,
+      [max]: <Mark value={max} />,
+    });
+  };
+
   return (
     <div>
-      <Title
+      <Title text={"Востребованность постамата, усл. ед."} />
-        text={"Востребованность постамата, усл. ед."}
+      <Slider
-        className="flex justify-center"
+        range
+        defaultValue={[0, 100]}
+        marks={marks}
+        onAfterChange={handleAfterChange}
       />
-      <Slider range defaultValue={[20, 50]} />
     </div>
   );
 };

tailwind.config.cjs

@@ -4,15 +4,15 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        'primary': '#CC2222FF',
+        primary: "#CC2222FF",
-        'blue': '#a8c9ec',
+        blue: "rgba(167,201,236,0.57)",
-        'white-background': 'rgba(255, 255, 255, 0.8)',
+        "white-background": "rgba(255, 255, 255, 0.8)",
-        'grey': 'rgba(0,0, 0, 0.5)'
+        grey: "rgba(0,0, 0, 0.5)",
       },
-    }
+    },
   },
   plugins: [],
   corePlugins: {
-    preflight: false // <== disable this!
+    preflight: false, // <== disable this!
   },
-}
+};