'use client'; import { MapContainer, TileLayer, Marker, Circle, useMap } from 'react-leaflet'; import { useEffect } from 'react'; import 'leaflet/dist/leaflet.css'; import L from 'leaflet'; // Atur ikon default leaflet delete L.Icon.Default.prototype._getIconUrl; L.Icon.Default.mergeOptions({ iconRetinaUrl: '/leaflet/marker-icon-2x.png', iconUrl: '/leaflet/marker-icon.png', shadowUrl: '/leaflet/marker-shadow.png', }); // Ikon khusus untuk user const userIcon = L.icon({ iconUrl: '/leaflet/marker-icon-user.png', iconSize: [25, 41], iconAnchor: [12, 41], }); function RecenterMap({ lat, lng }) { const map = useMap(); useEffect(() => { if (lat && lng) { map.flyTo([lat, lng], map.getZoom()); } }, [lat, lng, map]); return null; } export default function RealTimeMapComponent({ userLat, userLng, targetLat, targetLng, radius, zoom = 17, }) { const defaultCenter = [-6.210132605910127, 106.83536210778433]; const center = targetLat && targetLng ? [parseFloat(targetLat), parseFloat(targetLng)] : userLat && userLng ? [userLat, userLng] : null; if (!center) return
Memuat peta...
; return (