102 lines
4.3 KiB
TypeScript
102 lines
4.3 KiB
TypeScript
import type { StyleSpecification } from "maplibre-gl";
|
|
|
|
type LayerSpecification = StyleSpecification["layers"][number];
|
|
type LineLayerSpecification = Extract<LayerSpecification, { type: "line" }>;
|
|
type CircleLayerSpecification = Extract<LayerSpecification, { type: "circle" }>;
|
|
type LineWidth = NonNullable<LineLayerSpecification["paint"]>["line-width"];
|
|
type CircleRadius = NonNullable<CircleLayerSpecification["paint"]>["circle-radius"];
|
|
|
|
export const MAP_MAX_ZOOM = 24;
|
|
|
|
const lineHitWidth = [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
11,
|
|
16,
|
|
17,
|
|
18,
|
|
22,
|
|
22,
|
|
24,
|
|
24
|
|
] as LineWidth;
|
|
|
|
const pointHitRadius = [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
12,
|
|
9,
|
|
16,
|
|
10,
|
|
20,
|
|
12,
|
|
24,
|
|
14
|
|
] as CircleRadius;
|
|
|
|
export const DRAINAGE_LAYER_VISUALS = {
|
|
conduits: {
|
|
minzoom: 9,
|
|
casingWidth: [
|
|
"interpolate", ["linear"], ["zoom"],
|
|
9, 1.7,
|
|
13, 2.8,
|
|
17, ["+", 4.5, ["/", ["coalesce", ["get", "diameter"], 100], 300]],
|
|
22, ["+", 6, ["/", ["coalesce", ["get", "diameter"], 100], 260]],
|
|
24, ["+", 7, ["/", ["coalesce", ["get", "diameter"], 100], 240]]
|
|
] as LineWidth,
|
|
width: [
|
|
"interpolate", ["linear"], ["zoom"],
|
|
9, 1.1,
|
|
13, 2,
|
|
17, ["+", 2.5, ["/", ["coalesce", ["get", "diameter"], 100], 360]],
|
|
22, ["+", 3.5, ["/", ["coalesce", ["get", "diameter"], 100], 300]],
|
|
24, ["+", 4, ["/", ["coalesce", ["get", "diameter"], 100], 280]]
|
|
] as LineWidth,
|
|
hoverOutlineWidth: ["interpolate", ["linear"], ["zoom"], 9, 5.5, 13, 8, 17, 12.5, 22, 15, 24, 17] as LineWidth,
|
|
hoverWidth: ["interpolate", ["linear"], ["zoom"], 9, 3, 13, 5.2, 17, 9, 22, 11.5, 24, 13] as LineWidth,
|
|
selectedWidth: ["interpolate", ["linear"], ["zoom"], 9, 4, 13, 6.5, 17, 10.5, 22, 13.5, 24, 16] as LineWidth,
|
|
selectedBorderWidth: ["interpolate", ["linear"], ["zoom"], 9, 1.2, 13, 1.5, 17, 2, 22, 2.5, 24, 3] as LineWidth,
|
|
hitWidth: lineHitWidth
|
|
},
|
|
junctions: {
|
|
minzoom: 12,
|
|
haloRadius: ["interpolate", ["linear"], ["zoom"], 12, 1.2, 14, 1.8, 15, 2.8, 16, 4.5, 20, 7, 24, 9.5] as CircleRadius,
|
|
haloOpacity: ["interpolate", ["linear"], ["zoom"], 12, 0, 14, 0, 15, 1] as const,
|
|
radius: ["interpolate", ["linear"], ["zoom"], 12, 0.6, 14, 1, 15, 1.5, 16, 3, 20, 5.5, 24, 8] as CircleRadius,
|
|
hoverRadius: ["interpolate", ["linear"], ["zoom"], 12, 5, 16, 7, 20, 10, 24, 12] as CircleRadius,
|
|
selectedRadius: ["interpolate", ["linear"], ["zoom"], 12, 5.5, 16, 7.5, 20, 10.5, 24, 13] as CircleRadius,
|
|
hitRadius: pointHitRadius
|
|
},
|
|
orifices: {
|
|
minzoom: 11,
|
|
casingWidth: ["interpolate", ["linear"], ["zoom"], 11, 3.2, 17, 7.5, 22, 9, 24, 10] as LineWidth,
|
|
width: ["interpolate", ["linear"], ["zoom"], 11, 1.6, 17, 4.5, 22, 6, 24, 7] as LineWidth,
|
|
hoverOutlineWidth: ["interpolate", ["linear"], ["zoom"], 11, 6, 17, 10.5, 22, 12.5, 24, 14] as LineWidth,
|
|
hoverWidth: ["interpolate", ["linear"], ["zoom"], 11, 4, 17, 7, 22, 9, 24, 10.5] as LineWidth,
|
|
selectedWidth: ["interpolate", ["linear"], ["zoom"], 11, 5.5, 17, 9, 22, 12, 24, 14] as LineWidth,
|
|
selectedBorderWidth: ["interpolate", ["linear"], ["zoom"], 11, 1.25, 17, 1.75, 22, 2.25, 24, 2.5] as LineWidth,
|
|
hitWidth: lineHitWidth
|
|
},
|
|
pumps: {
|
|
minzoom: 11,
|
|
casingWidth: ["interpolate", ["linear"], ["zoom"], 11, 4, 17, 9.5, 22, 11, 24, 12] as LineWidth,
|
|
width: ["interpolate", ["linear"], ["zoom"], 11, 2.4, 17, 6.2, 22, 8, 24, 9] as LineWidth,
|
|
hoverOutlineWidth: ["interpolate", ["linear"], ["zoom"], 11, 7, 17, 12, 22, 14, 24, 16] as LineWidth,
|
|
hoverWidth: ["interpolate", ["linear"], ["zoom"], 11, 4.5, 17, 8.5, 22, 10.5, 24, 12] as LineWidth,
|
|
selectedWidth: ["interpolate", ["linear"], ["zoom"], 11, 6, 17, 10, 22, 13, 24, 15] as LineWidth,
|
|
selectedBorderWidth: ["interpolate", ["linear"], ["zoom"], 11, 1.25, 17, 1.75, 22, 2.25, 24, 2.5] as LineWidth,
|
|
hitWidth: lineHitWidth
|
|
},
|
|
outfalls: {
|
|
minzoom: 11,
|
|
haloRadius: ["interpolate", ["linear"], ["zoom"], 11, 5, 16, 7, 20, 9, 24, 11] as CircleRadius,
|
|
radius: ["interpolate", ["linear"], ["zoom"], 11, 3, 16, 5, 20, 7, 24, 9] as CircleRadius,
|
|
hoverRadius: ["interpolate", ["linear"], ["zoom"], 11, 6, 16, 8, 20, 11, 24, 13] as CircleRadius,
|
|
selectedRadius: ["interpolate", ["linear"], ["zoom"], 11, 7.5, 16, 9.5, 20, 12.5, 24, 15] as CircleRadius,
|
|
hitRadius: pointHitRadius
|
|
}
|
|
} as const;
|