|
|
|
|
@ -2,18 +2,60 @@ import { Layer, Source } from "react-map-gl";
|
|
|
|
|
import { gridLayer } from "./layers-config";
|
|
|
|
|
import { useGridSize } from "../stores/useGridSize";
|
|
|
|
|
import { useLayersVisibility } from "../stores/useLayersVisibility";
|
|
|
|
|
import { useFactors } from "../stores/useFactors";
|
|
|
|
|
import { useMemo } from "react";
|
|
|
|
|
|
|
|
|
|
export const Grid = ({ rate }) => {
|
|
|
|
|
const getWeightedValueExpression = (factor, weight) => {
|
|
|
|
|
return ["*", ["to-number", ["get", factor]], weight];
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const getRateExpression = (factorWeights) => {
|
|
|
|
|
const weightSum = Object.entries(factorWeights).reduce(
|
|
|
|
|
(acc, [_factor, weight]) => {
|
|
|
|
|
acc += weight;
|
|
|
|
|
return acc;
|
|
|
|
|
},
|
|
|
|
|
0
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const weightedValuesSum = Object.entries(factorWeights).reduce(
|
|
|
|
|
(acc, [factor, weight]) => {
|
|
|
|
|
acc.push(getWeightedValueExpression(factor, weight));
|
|
|
|
|
return acc;
|
|
|
|
|
},
|
|
|
|
|
["+"]
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return ["/", weightedValuesSum, weightSum];
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const Grid = ({ rate: rateRange }) => {
|
|
|
|
|
const { gridSize } = useGridSize();
|
|
|
|
|
const {
|
|
|
|
|
isVisible: { grid },
|
|
|
|
|
} = useLayersVisibility();
|
|
|
|
|
const { factors } = useFactors();
|
|
|
|
|
|
|
|
|
|
const rate = useMemo(() => getRateExpression(factors), [factors]);
|
|
|
|
|
|
|
|
|
|
const filter = useMemo(() => {
|
|
|
|
|
return ["all", [">=", rate, rateRange[0]], ["<=", rate, rateRange[1]]];
|
|
|
|
|
}, [rate, rateRange]);
|
|
|
|
|
|
|
|
|
|
const filter = [
|
|
|
|
|
"all",
|
|
|
|
|
[">=", ["get", "rate"], rate[0]],
|
|
|
|
|
["<=", ["get", "rate"], rate[1]],
|
|
|
|
|
];
|
|
|
|
|
const paintConfig = {
|
|
|
|
|
...gridLayer.paint,
|
|
|
|
|
"fill-color": [
|
|
|
|
|
"interpolate",
|
|
|
|
|
["linear"],
|
|
|
|
|
rate,
|
|
|
|
|
0,
|
|
|
|
|
"rgb(204,34,34)",
|
|
|
|
|
25,
|
|
|
|
|
"rgb(255,221,52)",
|
|
|
|
|
40,
|
|
|
|
|
"rgb(30,131,42)",
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
@ -21,18 +63,19 @@ export const Grid = ({ rate }) => {
|
|
|
|
|
id="grid3"
|
|
|
|
|
type="vector"
|
|
|
|
|
tiles={[
|
|
|
|
|
`https://postamates.spatiality.website/martin/public.net3/{z}/{x}/{y}.pbf`,
|
|
|
|
|
`https://postamates.spatiality.website/martin/public.net_3/{z}/{x}/{y}.pbf`,
|
|
|
|
|
]}
|
|
|
|
|
>
|
|
|
|
|
<Layer
|
|
|
|
|
{...gridLayer}
|
|
|
|
|
id={"grid3"}
|
|
|
|
|
source={"grid3"}
|
|
|
|
|
source-layer={"public.net3"}
|
|
|
|
|
source-layer={"public.net_3"}
|
|
|
|
|
layout={{
|
|
|
|
|
...gridLayer.layout,
|
|
|
|
|
visibility: grid && gridSize === "net3" ? "visible" : "none",
|
|
|
|
|
visibility: grid && gridSize === "net_3" ? "visible" : "none",
|
|
|
|
|
}}
|
|
|
|
|
paint={paintConfig}
|
|
|
|
|
filter={filter}
|
|
|
|
|
/>
|
|
|
|
|
</Source>
|
|
|
|
|
@ -40,38 +83,40 @@ export const Grid = ({ rate }) => {
|
|
|
|
|
id="grid4"
|
|
|
|
|
type="vector"
|
|
|
|
|
tiles={[
|
|
|
|
|
`https://postamates.spatiality.website/martin/public.net4/{z}/{x}/{y}.pbf`,
|
|
|
|
|
`https://postamates.spatiality.website/martin/public.net_4/{z}/{x}/{y}.pbf`,
|
|
|
|
|
]}
|
|
|
|
|
>
|
|
|
|
|
<Layer
|
|
|
|
|
{...gridLayer}
|
|
|
|
|
id={"grid4"}
|
|
|
|
|
source={"grid4"}
|
|
|
|
|
source-layer={"public.net4"}
|
|
|
|
|
source-layer={"public.net_4"}
|
|
|
|
|
layout={{
|
|
|
|
|
...gridLayer.layout,
|
|
|
|
|
visibility: grid && gridSize === "net4" ? "visible" : "none",
|
|
|
|
|
visibility: grid && gridSize === "net_4" ? "visible" : "none",
|
|
|
|
|
}}
|
|
|
|
|
filter={filter}
|
|
|
|
|
paint={paintConfig}
|
|
|
|
|
/>
|
|
|
|
|
</Source>
|
|
|
|
|
<Source
|
|
|
|
|
id="grid5"
|
|
|
|
|
type="vector"
|
|
|
|
|
tiles={[
|
|
|
|
|
`https://postamates.spatiality.website/martin/public.net5/{z}/{x}/{y}.pbf`,
|
|
|
|
|
`https://postamates.spatiality.website/martin/public.net_5/{z}/{x}/{y}.pbf`,
|
|
|
|
|
]}
|
|
|
|
|
>
|
|
|
|
|
<Layer
|
|
|
|
|
{...gridLayer}
|
|
|
|
|
id={"grid5"}
|
|
|
|
|
source={"grid5"}
|
|
|
|
|
source-layer={"public.net5"}
|
|
|
|
|
source-layer={"public.net_5"}
|
|
|
|
|
layout={{
|
|
|
|
|
...gridLayer.layout,
|
|
|
|
|
visibility: grid && gridSize === "net5" ? "visible" : "none",
|
|
|
|
|
visibility: grid && gridSize === "net_5" ? "visible" : "none",
|
|
|
|
|
}}
|
|
|
|
|
filter={filter}
|
|
|
|
|
paint={paintConfig}
|
|
|
|
|
/>
|
|
|
|
|
</Source>
|
|
|
|
|
</>
|
|
|
|
|
|