Map Rain

1"use client"
2 
3import { useEffect, useRef } from "react"
4import { useMap } from "./hooks"
5 
6type MapboxExpression = unknown[]
7 
8type MapRainProps = {
9  density?: number | MapboxExpression
10  intensity?: number
11  color?: string
12  opacity?: number
13  vignette?: number | MapboxExpression
14  vignetteColor?: string
15  direction?: [number, number]
16  dropletSize?: [number, number]
17  distortionStrength?: number
18  centerThinning?: number
19}
20 
21export const createZoomInterpolation = (
22  value: number,
23  minZoom: number = 11,
24  maxZoom: number = 13
25): MapboxExpression => {
26  return ["interpolate", ["linear"], ["zoom"], minZoom, 0.0, maxZoom, value]
27}
28 
29const clampValue = (value: number, min: number, max: number): number => {
30  return Math.min(Math.max(value, min), max)
31}
32 
33const applyRainEffect = (map: mapboxgl.Map, config: Record<string, unknown>): void => {
34  ;(map as unknown as { setRain: (config: Record<string, unknown> | null) => void }).setRain(config)
35}
36 
37const removeRainEffect = (map: mapboxgl.Map): void => {
38  ;(map as unknown as { setRain: (config: Record<string, unknown> | null) => void }).setRain(null)
39}
40 
41const hasRainSupport = (map: mapboxgl.Map): boolean => {
42  return typeof (map as unknown as Record<string, unknown>).setRain === "function"
43}
44 
45const DEFAULT_DIRECTION: [number, number] = [0, 80]
46const DEFAULT_DROPLET_SIZE: [number, number] = [2.6, 18.2]
47 
48export const MapRain = ({
49  density = 0.5,
50  intensity = 1,
51  color = "#a8adbc",
52  opacity = 0.7,
53  vignette = 1,
54  vignetteColor = "#464646",
55  direction = DEFAULT_DIRECTION,
56  dropletSize = DEFAULT_DROPLET_SIZE,
57  distortionStrength = 0.7,
58  centerThinning = 0,
59}: MapRainProps) => {
60  const { map, isLoaded } = useMap()
61  const initializedRef = useRef(false)
62 
63  useEffect(() => {
64    if (!isLoaded || !map || initializedRef.current) {
65      return
66    }
67 
68    if (!hasRainSupport(map)) {
69      console.warn("Rain effect requires Mapbox GL JS v3.9 or higher. This feature is not available in MapLibre GL.")
70      return
71    }
72 
73    try {
74      const clampedDensity = typeof density === "number" ? clampValue(density, 0, 1) : density
75      const clampedVignette = typeof vignette === "number" ? clampValue(vignette, 0, 1) : vignette
76 
77      applyRainEffect(map, {
78        density: clampedDensity,
79        intensity: clampValue(intensity, 0, 1),
80        color,
81        opacity: clampValue(opacity, 0, 1),
82        vignette: clampedVignette,
83        "vignette-color": vignetteColor,
84        direction,
85        "droplet-size": dropletSize,
86// … truncated