62 lines
1.8 KiB
JavaScript
62 lines
1.8 KiB
JavaScript
"use client";
|
|
import { useEffect } from "react";
|
|
import L from "leaflet";
|
|
import { MapContainer, Marker, TileLayer } from "react-leaflet";
|
|
import "leaflet/dist/leaflet.css";
|
|
|
|
// Fix Leaflet default marker icon issue
|
|
delete L.Icon.Default.prototype._getIconUrl;
|
|
L.Icon.Default.mergeOptions({
|
|
iconRetinaUrl:
|
|
"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
|
|
iconUrl:
|
|
"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
|
|
shadowUrl:
|
|
"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
|
|
});
|
|
|
|
const Map = ({ latitude, longitude }) => {
|
|
const containerStyle = {
|
|
width: "100%",
|
|
height: "200px",
|
|
zIndex: 0,
|
|
};
|
|
|
|
// Validate latitude and longitude
|
|
const lat = parseFloat(latitude);
|
|
const lng = parseFloat(longitude);
|
|
|
|
// Check if coordinates are valid numbers and within valid ranges
|
|
const isValidLat = !isNaN(lat) && lat >= -90 && lat <= 90;
|
|
const isValidLng = !isNaN(lng) && lng >= -180 && lng <= 180;
|
|
|
|
// Use default coordinates if invalid (you can change these to your preferred default location)
|
|
const center = [isValidLat ? lat : 0, isValidLng ? lng : 0];
|
|
|
|
// Don't render marker if coordinates are invalid
|
|
const shouldShowMarker = isValidLat && isValidLng;
|
|
|
|
useEffect(() => {}, [shouldShowMarker]);
|
|
|
|
return (
|
|
shouldShowMarker && (
|
|
<MapContainer
|
|
style={containerStyle}
|
|
center={center}
|
|
zoom={10}
|
|
scrollWheelZoom={false}
|
|
zoomControl={false}
|
|
attributionControl={false}
|
|
>
|
|
<TileLayer
|
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
/>
|
|
<Marker position={center} />
|
|
</MapContainer>
|
|
)
|
|
);
|
|
};
|
|
|
|
export default Map;
|