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>

components/doctor/detailDoctor/cards/locations/Item.js

@@ -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
+            <MapView
-              src={`https://maps.google.com/maps?q=${data.map.latitude},${data.map.longitude}&z=14&output=embed`}
+              latitude={data.map.latitude}
-              className="w-full rounded-lg mt-4 h-full"
+              longitude={data.map.longitude}
-              referrerPolicy="no-referrer-when-downgrade"
+            />
-              allowFullScreen=""
-              loading="lazy"
-            ></iframe>
 
             <ModalOpenLocation
               open={open}

components/doctor/detailDoctor/cards/locations/MapView.js

@@ -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>
+  );
+}

package-lock.json

@@ -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,

package.json

@@ -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",