hamedandClaude Opus 4.8
ed985f55fb
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>
41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
"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='© <a href="https://openstreetmap.org">OpenStreetMap</a>'
|
|
/>
|
|
<Marker position={[lat, lng]} icon={icon} />
|
|
</MapContainer>
|
|
);
|
|
}
|