Map Grid

1"use client"
2 
3import { useEffect, useRef } from "react"
4import { createPortal } from "react-dom"
5import { useMap } from "./hooks"
6 
7type GridLabel = {
8  id: string
9  text: string
10  position: { x: number; y: number }
11  type: "lat" | "lng"
12}
13 
14type GridLinesResult = {
15  latitudeLines: GeoJSON.Feature<GeoJSON.LineString>[]
16  longitudeLines: GeoJSON.Feature<GeoJSON.LineString>[]
17  labels: GridLabel[]
18}
19 
20type MapGridProps = {
21  id?: string
22  latitudeInterval?: number
23  longitudeInterval?: number
24  lineColor?: string
25  lineOpacity?: number
26  lineWidth?: number
27  showLabels?: boolean
28  labelColor?: string
29  labelSize?: number
30  labelBackground?: string
31}
32 
33const DEFAULT_ID = "map-grid"
34const DEFAULT_LATITUDE_INTERVAL = 10
35const DEFAULT_LONGITUDE_INTERVAL = 10
36const DEFAULT_LINE_COLOR = "#ffffff"
37const DEFAULT_LINE_OPACITY = 0.3
38const DEFAULT_LINE_WIDTH = 1
39const DEFAULT_LABEL_COLOR = "#ffffff"
40const DEFAULT_LABEL_SIZE = 10
41const DEFAULT_LABEL_BACKGROUND = "rgba(0, 0, 0, 0.5)"
42 
43const MIN_LATITUDE = -90
44const MAX_LATITUDE = 90
45const MIN_RENDER_LATITUDE = -85
46const MAX_RENDER_LATITUDE = 85
47const LONGITUDE_WRAP = 180
48const LONGITUDE_CYCLE = 360
49 
50const LABEL_OFFSET_X = 8
51const LABEL_OFFSET_Y = 16
52const LABEL_PADDING = "2px 4px"
53const LABEL_BORDER_RADIUS = "2px"
54 
55const createLatitudeFeature = (latitude: number, west: number, east: number): GeoJSON.Feature<GeoJSON.LineString> => {
56  return {
57    type: "Feature",
58    properties: { latitude },
59    geometry: {
60      type: "LineString",
61      coordinates: [
62        [west, latitude],
63        [east, latitude],
64      ],
65    },
66  }
67}
68 
69const createLongitudeFeature = (
70  longitude: number,
71  south: number,
72  north: number
73): GeoJSON.Feature<GeoJSON.LineString> => {
74  const normalizedLongitude =
75    ((((longitude + LONGITUDE_WRAP) % LONGITUDE_CYCLE) + LONGITUDE_CYCLE) % LONGITUDE_CYCLE) - LONGITUDE_WRAP
76 
77  return {
78    type: "Feature",
79    properties: { longitude: normalizedLongitude },
80    geometry: {
81      type: "LineString",
82      coordinates: [
83        [longitude, Math.max(south, MIN_RENDER_LATITUDE)],
84        [longitude, Math.min(north, MAX_RENDER_LATITUDE)],
85      ],
86    },
87  }
88}
89 
90const createLatitudeLabel = (latitude: number, west: number, map: mapboxgl.Map): GridLabel => {
91  const point = map.project([west, latitude])
92  const direction = latitude >= 0 ? "N" : "S"
93 
94  return {
95    id: `lat-${latitude}`,
96    text: `${Math.abs(latitude)}°${direction}`,
97    position: { x: point.x + LABEL_OFFSET_X, y: point.y },
98    type: "lat",
99// … truncated