Map Blur Area

1"use client"
2 
3import { useEffect, useRef, useCallback, type CSSProperties } from "react"
4import { useMap } from "./hooks"
5import type { MapCoordinates } from "./types"
6 
7const DEFAULT_BLUR_AMOUNT = 8
8const DEFAULT_ROUNDED = 0
9const MIN_AREA_SIZE = 20
10 
11type BlurAreaConfig = {
12  coordinates: MapCoordinates[]
13  blur?: number
14  backgroundColor?: string
15  rounded?: number | "full"
16}
17 
18type MapBlurAreaProps = {
19  coordinates?: MapCoordinates[]
20  areas?: BlurAreaConfig[]
21  blur?: number
22  backgroundColor?: string
23  rounded?: number | "full"
24  blockInteraction?: boolean
25}
26 
27type Bounds = {
28  minX: number
29  maxX: number
30  minY: number
31  maxY: number
32}
33 
34const getBounds = (points: { x: number; y: number }[]): Bounds => {
35  const xs = points.map((p) => {
36    return p.x
37  })
38  const ys = points.map((p) => {
39    return p.y
40  })
41 
42  return {
43    minX: Math.min(...xs),
44    maxX: Math.max(...xs),
45    minY: Math.min(...ys),
46    maxY: Math.max(...ys),
47  }
48}
49 
50type BlurOverlayProps = {
51  coordinates: MapCoordinates[]
52  blur: number
53  backgroundColor?: string
54  rounded: number | "full"
55  blockInteraction: boolean
56}
57 
58const BlurOverlay = ({ coordinates, blur, backgroundColor, rounded, blockInteraction }: BlurOverlayProps) => {
59  const { map, isLoaded } = useMap()
60  const overlayRef = useRef<HTMLDivElement | null>(null)
61 
62  const updatePosition = useCallback(() => {
63    if (!overlayRef.current || !map) {
64      return
65    }
66 
67    const canvas = map.getCanvas()
68    const canvasWidth = canvas.clientWidth
69    const canvasHeight = canvas.clientHeight
70 
71    const projectedPoints = coordinates.map((coord) => {
72      return map.project(coord)
73    })
74    const bounds = getBounds(projectedPoints)
75 
76    const width = bounds.maxX - bounds.minX
77    const height = bounds.maxY - bounds.minY
78    const isVisible =
79      bounds.maxX >= 0 &&
80      bounds.minX <= canvasWidth &&
81      bounds.maxY >= 0 &&
82      bounds.minY <= canvasHeight &&
83      width >= MIN_AREA_SIZE &&
84      height >= MIN_AREA_SIZE
85 
86    if (!isVisible) {
87      overlayRef.current.style.opacity = "0"
88    } else {
89      overlayRef.current.style.opacity = "1"
90      overlayRef.current.style.left = `${bounds.minX}px`
91      overlayRef.current.style.top = `${bounds.minY}px`
92      overlayRef.current.style.width = `${width}px`
93      overlayRef.current.style.height = `${height}px`
94    }
95  }, [map, coordinates])
96 
97  useEffect(() => {
98    if (!map || !isLoaded || coordinates.length < 3) {
99      return
100    }
101 
102    updatePosition()
103 
104// … truncated