Map Polygon

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 MapPolygonProps = {
10  coordinates: MapPath
11  fillColor?: string
12  fillOpacity?: number
13  strokeColor?: string
14  strokeWidth?: number
15  strokeOpacity?: number
16  dashArray?: [number, number]
17}
18 
19const DEFAULT_FILL_COLOR = "#3b82f6"
20const DEFAULT_FILL_OPACITY = 0.4
21const DEFAULT_STROKE_COLOR = "#3b82f6"
22const DEFAULT_STROKE_WIDTH = 2
23const DEFAULT_STROKE_OPACITY = 1
24 
25const getClosedCoordinates = (coords: MapPath): MapPath => {
26  if (coords.length < 3) {
27    return coords
28  }
29 
30  const first = coords[0]
31  const last = coords[coords.length - 1]
32 
33  if (first[0] === last[0] && first[1] === last[1]) {
34    return coords
35  }
36 
37  return [...coords, first]
38}
39 
40export const MapPolygon = ({
41  coordinates,
42  fillColor = DEFAULT_FILL_COLOR,
43  fillOpacity = DEFAULT_FILL_OPACITY,
44  strokeColor = DEFAULT_STROKE_COLOR,
45  strokeWidth = DEFAULT_STROKE_WIDTH,
46  strokeOpacity = DEFAULT_STROKE_OPACITY,
47  dashArray,
48}: MapPolygonProps) => {
49  const { map, isLoaded } = useMap()
50  const id = useId()
51  const sourceId = `polygon-source-${id}`
52  const fillLayerId = `polygon-fill-layer-${id}`
53  const strokeLayerId = `polygon-stroke-layer-${id}`
54  const initializedRef = useRef(false)
55 
56  const coordinatesRef = useRef(coordinates)
57  const fillColorRef = useRef(fillColor)
58  const fillOpacityRef = useRef(fillOpacity)
59  const strokeColorRef = useRef(strokeColor)
60  const strokeWidthRef = useRef(strokeWidth)
61  const strokeOpacityRef = useRef(strokeOpacity)
62  const dashArrayRef = useRef(dashArray)
63 
64  coordinatesRef.current = coordinates
65  fillColorRef.current = fillColor
66  fillOpacityRef.current = fillOpacity
67  strokeColorRef.current = strokeColor
68  strokeWidthRef.current = strokeWidth
69  strokeOpacityRef.current = strokeOpacity
70  dashArrayRef.current = dashArray
71 
72  useEffect(() => {
73    if (!map) {
74      return
75    }
76 
77    const addLayers = (mapInstance: mapboxgl.Map) => {
78      if (mapInstance.getSource(sourceId)) {
79        return
80      }
81 
82      const closedCoordinates = getClosedCoordinates(coordinatesRef.current)
83 
84      mapInstance.addSource(sourceId, {
85        type: "geojson",
86        data: {
87          type: "Feature",
88          properties: {},
89          geometry: {
90            type: "Polygon",
91            coordinates: [closedCoordinates],
92          },
93        },
94      })
95 
96// … truncated