137 lines
3.1 KiB
TypeScript
137 lines
3.1 KiB
TypeScript
import type { StyleSpecification } from "maplibre-gl";
|
|
import { SOURCE_LAYERS } from "./sources";
|
|
|
|
export const waterNetworkLayers: StyleSpecification["layers"] = [
|
|
{
|
|
id: "pipes-casing",
|
|
type: "line",
|
|
source: "pipes",
|
|
"source-layer": SOURCE_LAYERS.pipes,
|
|
minzoom: 9,
|
|
paint: {
|
|
"line-color": "rgba(255,255,255,0.86)",
|
|
"line-width": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
9,
|
|
1,
|
|
13,
|
|
2.4,
|
|
17,
|
|
["+", 5, ["/", ["coalesce", ["get", "diameter"], 100], 280]]
|
|
],
|
|
"line-opacity": 0.9
|
|
}
|
|
},
|
|
{
|
|
id: "pipes-flow",
|
|
type: "line",
|
|
source: "pipes",
|
|
"source-layer": SOURCE_LAYERS.pipes,
|
|
minzoom: 9,
|
|
paint: {
|
|
"line-color": [
|
|
"case",
|
|
["==", ["get", "status"], "Closed"],
|
|
"#9ca3af",
|
|
[">=", ["coalesce", ["get", "diameter"], 0], 600],
|
|
"#0477bf",
|
|
[">=", ["coalesce", ["get", "diameter"], 0], 300],
|
|
"#0aa6a6",
|
|
"#3dbf7f"
|
|
],
|
|
"line-width": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
9,
|
|
0.8,
|
|
13,
|
|
1.8,
|
|
17,
|
|
["+", 2.5, ["/", ["coalesce", ["get", "diameter"], 100], 360]]
|
|
],
|
|
"line-opacity": 0.82
|
|
}
|
|
},
|
|
{
|
|
id: "pipes-risk-glow",
|
|
type: "line",
|
|
source: "pipes",
|
|
"source-layer": SOURCE_LAYERS.pipes,
|
|
minzoom: 12,
|
|
filter: [">=", ["coalesce", ["get", "diameter"], 0], 600],
|
|
paint: {
|
|
"line-color": "#ff7a45",
|
|
"line-width": ["interpolate", ["linear"], ["zoom"], 12, 2.6, 17, 7.5],
|
|
"line-blur": 2.5,
|
|
"line-opacity": 0.22
|
|
}
|
|
},
|
|
{
|
|
id: "pipes-hover",
|
|
type: "line",
|
|
source: "pipes",
|
|
"source-layer": SOURCE_LAYERS.pipes,
|
|
minzoom: 9,
|
|
filter: ["==", ["get", "id"], ""],
|
|
paint: {
|
|
"line-color": "#111827",
|
|
"line-width": 7,
|
|
"line-opacity": 0.35
|
|
}
|
|
},
|
|
{
|
|
id: "junctions-halo",
|
|
type: "circle",
|
|
source: "junctions",
|
|
"source-layer": SOURCE_LAYERS.junctions,
|
|
minzoom: 13,
|
|
paint: {
|
|
"circle-color": "#ffffff",
|
|
"circle-radius": ["interpolate", ["linear"], ["zoom"], 13, 2.8, 17, 6],
|
|
"circle-opacity": 0.82,
|
|
"circle-stroke-color": "rgba(15,23,42,0.22)",
|
|
"circle-stroke-width": 1
|
|
}
|
|
},
|
|
{
|
|
id: "junctions",
|
|
type: "circle",
|
|
source: "junctions",
|
|
"source-layer": SOURCE_LAYERS.junctions,
|
|
minzoom: 13,
|
|
paint: {
|
|
"circle-color": [
|
|
"interpolate",
|
|
["linear"],
|
|
["coalesce", ["get", "demand"], 0],
|
|
0,
|
|
"#70c1b3",
|
|
20,
|
|
"#247ba0",
|
|
60,
|
|
"#f25f5c"
|
|
],
|
|
"circle-radius": ["interpolate", ["linear"], ["zoom"], 13, 1.5, 17, 3.8],
|
|
"circle-opacity": 0.86
|
|
}
|
|
},
|
|
{
|
|
id: "junctions-hover",
|
|
type: "circle",
|
|
source: "junctions",
|
|
"source-layer": SOURCE_LAYERS.junctions,
|
|
minzoom: 13,
|
|
filter: ["==", ["get", "id"], ""],
|
|
paint: {
|
|
"circle-color": "#111827",
|
|
"circle-radius": ["interpolate", ["linear"], ["zoom"], 13, 5, 17, 10],
|
|
"circle-opacity": 0.2,
|
|
"circle-stroke-color": "#111827",
|
|
"circle-stroke-width": 2
|
|
}
|
|
}
|
|
];
|