feat: add MapView component for displaying maps with markers

2026-07-19 16:43:59 +03:30
parent e8a7bdf2fc
commit 10b5a19576
1 changed files with 0 additions and 0 deletions
@@ -0,0 +1,40 @@
+"use client";
+
+import { MapContainer, TileLayer, Marker } from "react-leaflet";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import markerIcon from "leaflet/dist/images/marker-icon.png";
+import markerIcon2x from "leaflet/dist/images/marker-icon-2x.png";
+import markerShadow from "leaflet/dist/images/marker-shadow.png";
+
+// آیکون پیش‌فرض Leaflet را از پکیج bundle می‌کنیم (بدون CDN؛ سازگار با CSP).
+const icon = L.icon({
+  iconUrl: markerIcon.src ?? markerIcon,
+  iconRetinaUrl: markerIcon2x.src ?? markerIcon2x,
+  shadowUrl: markerShadow.src ?? markerShadow,
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41],
+});
+
+export default function MapView({ latitude, longitude }) {
+  const lat = parseFloat(latitude);
+  const lng = parseFloat(longitude);
+  if (Number.isNaN(lat) || Number.isNaN(lng)) return null;
+
+  return (
+    <MapContainer
+      center={[lat, lng]}
+      zoom={15}
+      scrollWheelZoom={false}
+      style={{ height: "100%", width: "100%", borderRadius: 8 }}
+    >
+      <TileLayer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        attribution='&copy; <a href="https://openstreetmap.org">OpenStreetMap</a>'
+      />
+      <Marker position={[lat, lng]} icon={icon} />
+    </MapContainer>
+  );
+}