Adjust color scale and point size

src/Map/Grid.jsx

@@ -4,6 +4,46 @@ import { useGridSize } from "../stores/useGridSize";
 import { useLayersVisibility } from "../stores/useLayersVisibility";
 import { useMemo } from "react";
 import { useRateExpression } from "./useRateExpression";
+import { useModel } from "../stores/useModel";
+
+const useGridColorScale = () => {
+  const rate = useRateExpression();
+  const { model } = useModel();
+
+  if (model === "ml") {
+    return [
+      "interpolate",
+      ["linear"],
+      rate,
+      0,
+      "rgba(255,0,0,0.78)",
+      10,
+      "rgb(255,137,52)",
+      20,
+      "rgb(255,197,52)",
+      30,
+      "rgb(233,250,0)",
+      40,
+      "rgb(92,164,3)",
+      80,
+      "rgb(7,112,3)",
+      100,
+      "rgb(2,72,1)",
+    ];
+  }
+
+  return [
+    "interpolate",
+    ["linear"],
+    rate,
+    0,
+    "rgb(204,34,34)",
+    10,
+    "rgb(255,221,52)",
+    20,
+    "rgb(30,131,42)",
+  ];
+};
 
 export const Grid = ({ rate: rateRange }) => {
   const { gridSize } = useGridSize();
@@ -12,6 +52,7 @@ export const Grid = ({ rate: rateRange }) => {
   } = useLayersVisibility();
 
   const rate = useRateExpression();
+  const colorScale = useGridColorScale();
 
   const filter = useMemo(() => {
     return ["all", [">=", rate, rateRange[0]], ["<=", rate, rateRange[1]]];
@@ -19,17 +60,7 @@ export const Grid = ({ rate: rateRange }) => {
 
   const paintConfig = {
     ...gridLayer.paint,
-    "fill-color": [
+    "fill-color": colorScale,
-      "interpolate",
-      ["linear"],
-      rate,
-      0,
-      "rgb(204,34,34)",
-      10,
-      "rgb(255,221,52)",
-      20,
-      "rgb(30,131,42)",
-    ],
   };
 
   return (

src/Map/Points.jsx

@@ -12,26 +12,25 @@ const usePointSizeScale = () => {
   const { model } = useModel();
 
   if (model === "ml") {
-    return ["interpolate", ["linear"], rate, 0, 0, 10, 5, 50, 20];
+    return [
-    // return [
+      "interpolate",
-    //   "interpolate",
+      ["linear"],
-    //   ["linear"],
+      rate,
-    //   rate,
+      0,
-    //   0,
+      0,
-    //   0,
+      10,
-    //   10,
+      3,
-    //   3,
+      20,
-    //   20,
+      4,
-    //   4,
+      30,
-    //   30,
+      5,
-    //   5,
+      40,
-    //   40,
+      6,
-    //   6,
+      80,
-    //   80,
+      9,
-    //   9,
+      100,
-    //   100,
+      12,
-    //   15,
+    ];
-    // ];
   }
 
   return ["interpolate", ["linear"], rate, 0, 0, 10, 5, 50, 20];

src/modules/Sidebar/RatingSlider.jsx

@@ -11,6 +11,7 @@ export const RatingSlider = () => {
       title={"Востребованность постамата, у.e."}
       value={rate}
       onAfterChange={handleAfterChange}
+      min={1}
       max={100}
       range
     />

src/stores/useRating.js

@@ -2,7 +2,7 @@ import create from "zustand";
 import { immer } from "zustand/middleware/immer";
 
 const store = (set) => ({
-  rate: [0, 100],
+  rate: [1, 100],
   setRate: (value) =>
     set((state) => {
       state.rate = value;