classify web

components/Location/Map.jsx

@@ -0,0 +1,61 @@
+"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='&copy; <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;