138 lines
4.7 KiB
JavaScript
138 lines
4.7 KiB
JavaScript
import React, { useEffect, useRef, useState } from "react";
|
|
import { Marker, useMapEvents } from "react-leaflet";
|
|
import "leaflet/dist/leaflet.css";
|
|
import L from "leaflet";
|
|
import { Box, Button, Typography } from "@mui/material";
|
|
import dynamic from "next/dynamic";
|
|
import MapLoading from "@/core/components/MapLayer/Loading";
|
|
import HereIcon from "@/assets/images/examine_marker_active.png";
|
|
|
|
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
|
|
loading: () => <MapLoading />,
|
|
ssr: false,
|
|
});
|
|
|
|
const createCustomIcon = (size, iconUrl, labelText) => {
|
|
if (labelText) {
|
|
return L.divIcon({
|
|
html: `
|
|
<div style="position: relative; display: inline-block; text-align: center;">
|
|
<img
|
|
src="${iconUrl}"
|
|
style="width: ${size[0]}px; height: ${size[1]}px;"
|
|
alt="icon"
|
|
/>
|
|
<div style="position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); color: black; font-size: 12px;">
|
|
${labelText}
|
|
</div>
|
|
</div>
|
|
`,
|
|
iconSize: size,
|
|
iconAnchor: [size[0] / 2, size[1]],
|
|
popupAnchor: [0, -size[1]],
|
|
});
|
|
}
|
|
|
|
return L.icon({
|
|
iconUrl: iconUrl,
|
|
iconSize: size,
|
|
iconAnchor: [size[0] / 2, size[1]],
|
|
popupAnchor: [0, -size[1]],
|
|
});
|
|
};
|
|
|
|
const MapInteraction = ({ setValue, startLat, startLng }) => {
|
|
const [isMarkerLocked, setIsMarkerLocked] = useState(!!(startLat && startLng)); // وضعیت قفل مارکر
|
|
const [markerPosition, setMarkerPosition] = useState(
|
|
startLat && startLng ? { lat: startLat, lng: startLng } : null
|
|
);
|
|
const markerRef = useRef();
|
|
|
|
const map = useMapEvents({
|
|
move(e) {
|
|
if (!isMarkerLocked && markerRef.current) {
|
|
markerRef.current.setLatLng(e.target.getCenter());
|
|
}
|
|
},
|
|
zoom(e) {
|
|
if (!isMarkerLocked && markerRef.current) {
|
|
markerRef.current.setLatLng(e.target.getCenter());
|
|
}
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (startLat && startLng) {
|
|
const position = { lat: startLat, lng: startLng };
|
|
map.setView(position, 15);
|
|
}
|
|
}, [startLat, startLng, map]);
|
|
|
|
const handleMarkerClick = () => {
|
|
if (!isMarkerLocked) {
|
|
const center = map.getCenter();
|
|
setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
|
|
setMarkerPosition({ lat: center.lat, lng: center.lng }); // بهروزرسانی موقعیت مارکر
|
|
setIsMarkerLocked(true);
|
|
}
|
|
};
|
|
|
|
const handleUnlockMarker = () => {
|
|
setValue("start_point", null); // حذف مقدار قبلی
|
|
setIsMarkerLocked(false); // باز کردن قفل مارکر
|
|
setMarkerPosition(null); // تنظیم مارکر به مرکز نقشه
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Marker
|
|
position={markerPosition || map.getCenter()} // استفاده از موقعیت
|
|
ref={markerRef}
|
|
icon={createCustomIcon([35, 35], HereIcon.src, "اینجا")}
|
|
eventHandlers={{
|
|
click: handleMarkerClick,
|
|
}}
|
|
/>
|
|
{isMarkerLocked && (
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
bottom: 10,
|
|
left: 10,
|
|
zIndex: 1000,
|
|
}}
|
|
>
|
|
<Button variant="contained" onClick={handleUnlockMarker}>
|
|
ویرایش
|
|
</Button>
|
|
</Box>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
const MapInfoOneMarker = ({ setValue, errors, StartPoint = null }) => {
|
|
return (
|
|
<Box>
|
|
<Box sx={{ width: "100%", height: "400px", marginBottom: "16px" }}>
|
|
<MapLayer style={{ border: "1px solid #0009", borderRadius: "4px" }}>
|
|
<MapInteraction
|
|
setValue={setValue}
|
|
startLat={StartPoint ? StartPoint.lat : null}
|
|
startLng={StartPoint ? StartPoint.lng : null}
|
|
/>
|
|
</MapLayer>
|
|
</Box>
|
|
<Box display="flex" gap={2}>
|
|
{errors.start_point && (
|
|
<Typography color="error" variant="body2">
|
|
{errors.start_point.message}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default MapInfoOneMarker;
|