Map Line

1"use client"
2 
3import type mapboxgl from "mapbox-gl"
4 
5import { useEffect, useId, useRef } from "react"
6import { useMap } from "./hooks"
7import type { MapPath } from "./types"
8 
9type MapLineProps = {
10  /** Array of [longitude, latitude] coordinate pairs defining the line */
11  coordinates: MapPath
12  /** Line color as CSS color value (default: "#4285F4") */
13  color?: string
14  /** Line width in pixels (default: 3) */
15  width?: number
16  /** Line opacity from 0 to 1 (default: 0.8) */
17  opacity?: number
18  /** Dash pattern [dash length, gap length] for dashed lines */
19  dashArray?: [number, number]
20}
21 
22export function MapLine({ coordinates, color = "#4285F4", width = 3, opacity = 0.8, dashArray }: MapLineProps) {
23  const { map, isLoaded } = useMap()
24  const id = useId()
25  const sourceId = `line-source-${id}`
26  const layerId = `line-layer-${id}`
27  const initializedRef = useRef(false)
28 
29  useEffect(() => {
30    if (!isLoaded || !map || initializedRef.current) return
31 
32    try {
33      // Create GeoJSON data
34      const geojsonData: GeoJSON.Feature<GeoJSON.LineString> = {
35        type: "Feature",
36        properties: {},
37        geometry: {
38          type: "LineString",
39          coordinates: coordinates,
40        },
41      }
42 
43      // Add source
44      map.addSource(sourceId, {
45        type: "geojson",
46        data: geojsonData,
47      })
48 
49      // Find the first symbol layer to insert the line layer before it
50      const layers = map.getStyle().layers
51      let firstSymbolId: string | undefined
52      if (layers) {
53        for (const layer of layers) {
54          if (layer.type === "symbol") {
55            firstSymbolId = layer.id
56            break
57          }
58        }
59      }
60 
61      // Add layer
62      map.addLayer(
63        {
64          id: layerId,
65          type: "line",
66          source: sourceId,
67          layout: {
68            "line-join": "round",
69            "line-cap": "round",
70          },
71          paint: {
72            "line-color": color,
73            "line-width": width,
74            "line-opacity": opacity,
75            ...(dashArray && { "line-dasharray": dashArray }),
76          },
77        },
78        firstSymbolId
79      )
80 
81      initializedRef.current = true
82    } catch (error) {
83      console.error("Error adding line layer:", error)
84    }
85 
86    return () => {
87      initializedRef.current = false
88      try {
89        if (map && map.getStyle()) {
90          if (map.getLayer(layerId)) {
91            map.removeLayer(layerId)
92          }
93// … truncated