Map Image

1"use client"
2 
3import { useEffect, useRef } from "react"
4import { useMap } from "./hooks"
5import type { MapImageCorners } from "./types"
6 
7type MapImageProps = {
8  id: string
9  url: string
10  coordinates: MapImageCorners
11  opacity?: number
12}
13 
14export const MapImage = ({ id, url, coordinates, opacity = 1 }: MapImageProps) => {
15  const { map, isLoaded } = useMap()
16  const initializedRef = useRef(false)
17 
18  useEffect(() => {
19    if (!map || !isLoaded || initializedRef.current) return
20 
21    const sourceId = `${id}-source`
22    const layerId = `${id}-layer`
23 
24    map.addSource(sourceId, {
25      type: "image",
26      url,
27      coordinates,
28    })
29 
30    map.addLayer({
31      id: layerId,
32      type: "raster",
33      source: sourceId,
34      paint: {
35        "raster-opacity": opacity,
36      },
37    })
38 
39    initializedRef.current = true
40 
41    return () => {
42      if (map) {
43        try {
44          if (map.getLayer && map.getLayer(layerId)) map.removeLayer(layerId)
45          if (map.getSource && map.getSource(sourceId)) map.removeSource(sourceId)
46        } catch {
47          // Silently handle cleanup errors
48        }
49      }
50      initializedRef.current = false
51    }
52  }, [map, isLoaded, id, url, coordinates, opacity])
53 
54  return null
55}