feat(doctor map): replace Google Maps iframe with Leaflet (OSM)

The Google Maps iframe was blocked by CSP (frame-src falls back to default-src 'self'). Switched the doctor-page location map to react-leaflet with OpenStreetMap tiles — no iframe, and CSP already allows https image tiles (img-src 'self' https:). Marker icons are bundled from the leaflet package (no CDN). MapView is dynamically imported (ssr:false) since Leaflet needs window. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 15:29:17 +03:30
parent c007ffa2b3
commit ed985f55fb
4 changed files with 83 additions and 7 deletions
@@ -1,12 +1,16 @@
 "use client";

 import { useState } from "react";
+import dynamic from "next/dynamic";
 import { Button } from "@mui/material";
 import ArrowBottomGrayD from "@/components/icons/ArrowBottomGrayD";
 import ModalOpenLocation from "@/app/component/openLocation";
 import RoutingWhiteC from "@/components/icons/RoutingWhiteC";
 import RoutingC from "@/components/icons/RoutingC";

+// Leaflet به window نیاز دارد → فقط کلاینت
+const MapView = dynamic(() => import("./MapView"), { ssr: false });
+
 function Item({ data }) {
  const [isOpen, setIsOpen] = useState(false);

@@ -64,13 +68,10 @@ function Item({ data }) {
        </div>
        {isOpen && data?.map?.latitude && data?.map?.longitude && (
          <div className="w-full relative h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px] mt-[24px]">
-            <iframe
-              src={`https://maps.google.com/maps?q=${data.map.latitude},${data.map.longitude}&z=14&output=embed`}
-              className="w-full rounded-lg mt-4 h-full"
-              referrerPolicy="no-referrer-when-downgrade"
-              allowFullScreen=""
-              loading="lazy"
-            ></iframe>
+            <MapView
+              latitude={data.map.latitude}
+              longitude={data.map.longitude}
+            />

            <ModalOpenLocation
              open={open}
@@ -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>
+  );
+}
@@ -33,6 +33,7 @@
        "jalali-moment": "^3.3.11",
        "js-cookie": "^3.0.5",
        "jspdf": "^3.0.4",
+        "leaflet": "^1.9.4",
        "moment-jalaali": "^0.10.4",
        "next": "^16.2.10",
        "next-themes": "^0.4.6",
@@ -45,6 +46,7 @@
        "react-easy-crop": "^5.5.6",
        "react-google-map-picker": "^1.2.3",
        "react-images-uploading": "^3.1.7",
+        "react-leaflet": "^5.0.0",
        "react-toastify": "^11.0.5",
        "sharp": "^0.34.5",
        "styled-components": "^6.1.19",
@@ -1745,6 +1747,17 @@
        "url": "https://opencollective.com/popperjs"
      }
    },
+    "node_modules/@react-leaflet/core": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
+      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
    "node_modules/@react-spring/animated": {
      "version": "9.7.5",
      "license": "MIT",
@@ -6359,6 +6372,12 @@
        "node": ">=0.10"
      }
    },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
    "node_modules/levn": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -9489,6 +9508,20 @@
      "version": "19.2.1",
      "license": "MIT"
    },
+    "node_modules/react-leaflet": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
+      "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^3.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
      "dev": true,
@@ -40,6 +40,7 @@
    "jalali-moment": "^3.3.11",
    "js-cookie": "^3.0.5",
    "jspdf": "^3.0.4",
+    "leaflet": "^1.9.4",
    "moment-jalaali": "^0.10.4",
    "next": "^16.2.10",
    "next-themes": "^0.4.6",
@@ -52,6 +53,7 @@
    "react-easy-crop": "^5.5.6",
    "react-google-map-picker": "^1.2.3",
    "react-images-uploading": "^3.1.7",
+    "react-leaflet": "^5.0.0",
    "react-toastify": "^11.0.5",
    "sharp": "^0.34.5",
    "styled-components": "^6.1.19",