Map Radar

1"use client"
2 
3import { useEffect, useId, useRef, useState } from "react"
4import { createPortal } from "react-dom"
5import { mapgl } from "./map-library"
6import { useMap } from "./hooks"
7import type { MapCoordinates } from "./types"
8 
9type RgbColor = { r: number; g: number; b: number }
10 
11type MapRadarProps = {
12  coordinates: MapCoordinates
13  size?: number
14  color?: string
15  gridColor?: string
16  backgroundColor?: string
17  duration?: number
18  rings?: number
19  showCrosshairs?: boolean
20  pitchAlignment?: "map" | "viewport" | "auto"
21}
22 
23type RadarContentProps = {
24  instanceId: string
25  size: number
26  color: string
27  gridColor: string
28  backgroundColor: string
29  duration: number
30  rings: number
31  showCrosshairs: boolean
32}
33 
34type RadarGridProps = {
35  radius: number
36  gridColor: string
37  rings: number
38  showCrosshairs: boolean
39}
40 
41type RadarSweepProps = {
42  instanceId: string
43  radius: number
44  color: string
45  duration: number
46}
47 
48type SweepGradientProps = {
49  radius: number
50  sweepRadius: number
51  rgb: RgbColor
52}
53 
54type SweepSegmentProps = {
55  radius: number
56  sweepRadius: number
57  rgb: RgbColor
58  segmentIndex: number
59}
60 
61const DEFAULT_SIZE = 200
62const DEFAULT_COLOR = "rgba(0, 255, 70, 1)"
63const DEFAULT_GRID_COLOR = "rgba(0, 255, 70, 0.3)"
64const DEFAULT_BACKGROUND_COLOR = "rgba(0, 20, 0, 0.8)"
65const DEFAULT_DURATION = 2000
66const DEFAULT_RINGS = 4
67const DEFAULT_CROSSHAIRS = true
68const DEFAULT_PITCH_ALIGNMENT = "map" as const
69const SWEEP_SEGMENT_COUNT = 20
70const SWEEP_ARC = Math.PI / 2.5
71 
72const createMarker = (
73  map: mapboxgl.Map,
74  container: HTMLDivElement,
75  coordinates: MapCoordinates,
76  pitchAlignment: "map" | "viewport" | "auto"
77) => {
78  return new mapgl.Marker({
79    element: container,
80    anchor: "center",
81    pitchAlignment,
82  })
83    .setLngLat(coordinates)
84    .addTo(map)
85}
86 
87export const MapRadar = ({
88  coordinates,
89  size = DEFAULT_SIZE,
90  color = DEFAULT_COLOR,
91  gridColor = DEFAULT_GRID_COLOR,
92  backgroundColor = DEFAULT_BACKGROUND_COLOR,
93  duration = DEFAULT_DURATION,
94  rings = DEFAULT_RINGS,
95  showCrosshairs = DEFAULT_CROSSHAIRS,
96  pitchAlignment = DEFAULT_PITCH_ALIGNMENT,
97}: MapRadarProps) => {
98  const { map, isLoaded } = useMap()
99  const instanceId = useId()
100  const markerRef = useRef<mapboxgl.Marker | null>(null)
101  const containerRef = useRef<HTMLDivElement | null>(null)
102  const [isMounted, setIsMounted] = useState(false)
103 
104  useEffect(() => {
105    if (!map || !isLoaded) {
106      return
107    }
108 
109    const container = document.createElement("div")
110// … truncated