import React, { useEffect, useRef } from 'react';
import L, { Map } from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css';
import 'leaflet-defaulticon-compatibility';
import { LucideMapPin } from 'lucide-react';
type MapProps = {
property_address: string;
map_lat: number;
map_lng: number;
};
export default function MapComponent({ property_address, map_lat, map_lng }: MapProps) {
const mapRef = useRef<Map | null>(null);
useEffect(() => {
if (!mapRef.current) {
mapRef.current = L.map('map').setView([map_lat, map_lng], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(mapRef.current);
L.marker([map_lat, map_lng])
.addTo(mapRef.current)
.openPopup();
}
return () => {
if (mapRef.current) {
mapRef.current.remove();
mapRef.current = null;
}
};
}, []);
return (
<section>
<div id="map" className="rounded-lg" style={{ height: '500px', width: '100%' }} />
<div className="text-gray-500 max-xs:text-sm text-xl flex gap-2 items-end">
<LucideMapPin className="max-xs:w-5" />
<p>{property_address}</p>
</div>
</section>
);
}