47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import React, { useEffect, useRef } from 'react'
|
|
import maplibregl from 'maplibre-gl'
|
|
import 'maplibre-gl/dist/maplibre-gl.css'
|
|
import { useMap } from '@/app/map-context'
|
|
import { useTheme } from '@/components/theme-provider'
|
|
|
|
interface MapComponentProps {
|
|
style?: string
|
|
center?: [number, number]
|
|
zoom?: number
|
|
}
|
|
|
|
export function MapComponent({
|
|
style = 'https://api.maptiler.com/maps/019817f1-82a8-7f37-901d-4bedf68b27fb/style.json?key=hj3fxRdwF9KjEsBq8sYI',
|
|
center = [103.851959, 1.290270],
|
|
zoom = 11
|
|
}: MapComponentProps) {
|
|
const mapContainer = useRef<HTMLDivElement>(null)
|
|
const { setMap } = useMap()
|
|
|
|
useEffect(() => {
|
|
if (!mapContainer.current) return
|
|
|
|
const map = new maplibregl.Map({
|
|
container: mapContainer.current,
|
|
style,
|
|
center,
|
|
zoom
|
|
})
|
|
|
|
setMap(map)
|
|
|
|
return () => {
|
|
map.remove()
|
|
}
|
|
}, [style, center, zoom, setMap])
|
|
|
|
return (
|
|
<div
|
|
ref={mapContainer}
|
|
className="w-full h-full"
|
|
style={{ minHeight: '400px' }}
|
|
/>
|
|
)
|
|
}
|