Map Animated Pulse

1"use client"
2 
3import { useEffect, useRef } from "react"
4import { useMap } from "./hooks"
5import type { MapCoordinates } from "./types"
6 
7const DEFAULT_SIZE = 100
8const DEFAULT_COLOR = "rgba(0, 100, 255, 1)"
9const DEFAULT_PULSE_COLOR = "rgba(0, 100, 255, 0.8)"
10const DEFAULT_DURATION = 1000
11 
12type MapAnimatedPulseProps = {
13  id: string
14  coordinates: MapCoordinates
15  size?: number
16  color?: string
17  pulseColor?: string
18  duration?: number
19}
20 
21type PulsingDot = {
22  width: number
23  height: number
24  data: Uint8ClampedArray
25  context?: CanvasRenderingContext2D
26  onAdd: () => void
27  render: () => boolean
28}
29 
30const createPulsingDot = (size: number, color: string, pulseColor: string, duration: number): PulsingDot => {
31  const dot: PulsingDot = {
32    width: size,
33    height: size,
34    data: new Uint8ClampedArray(size * size * 4),
35 
36    onAdd() {
37      const canvas = document.createElement("canvas")
38      canvas.width = this.width
39      canvas.height = this.height
40      this.context = canvas.getContext("2d", { willReadFrequently: true }) || undefined
41    },
42 
43    render() {
44      if (!this.context) {
45        return false
46      }
47 
48      const t = (performance.now() % duration) / duration
49      const radius = (size / 2) * 0.3
50      const outerRadius = (size / 2) * 0.7 * t + radius
51 
52      this.context.clearRect(0, 0, this.width, this.height)
53 
54      this.context.beginPath()
55      this.context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2)
56      this.context.fillStyle = pulseColor
57      this.context.globalAlpha = 1 - t
58      this.context.fill()
59 
60      this.context.beginPath()
61      this.context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2)
62      this.context.fillStyle = color
63      this.context.globalAlpha = 1
64      this.context.fill()
65 
66      this.data = this.context.getImageData(0, 0, this.width, this.height).data
67 
68      return true
69    },
70  }
71 
72  return dot
73}
74 
75export const MapAnimatedPulse = ({
76  id,
77  coordinates,
78  size = DEFAULT_SIZE,
79  color = DEFAULT_COLOR,
80  pulseColor = DEFAULT_PULSE_COLOR,
81  duration = DEFAULT_DURATION,
82}: MapAnimatedPulseProps) => {
83  const { map, isLoaded } = useMap()
84  const animationFrameRef = useRef<number | null>(null)
85  const sourceId = `${id}-source`
86  const layerId = `${id}-layer`
87 
88  useEffect(() => {
89    if (!isLoaded || !map) {
90      return
91    }
92 
93    const pulsingDot = createPulsingDot(size, color, pulseColor, duration)
94 
95    const addImage = () => {
96      if (!map.hasImage(id)) {
97// … truncated