Feature/faaliyat rozane cartable
This commit is contained in:
AmirHossein Mahmoodi
191
src/core/components/MapInfoTwoMarker.jsx
Normal file
191
src/core/components/MapInfoTwoMarker.jsx
Normal file
@@ -0,0 +1,191 @@
|
||||
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 EndIcon from "@/assets/images/examine_marker_active.png";
|
||||
import StartIcon from "@/assets/images/examine_marker.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, endLat, endLng }) => {
|
||||
const [isStartLocked, setIsStartLocked] = useState(!!(startLat && startLng)); // وضعیت قفل نقطه آغاز
|
||||
const [isEndLocked, setIsEndLocked] = useState(!!(endLat && endLng)); // وضعیت قفل نقطه پایان
|
||||
const [startPosition, setStartPosition] = useState(startLat && startLng ? { lat: startLat, lng: startLng } : null);
|
||||
const [endPosition, setEndPosition] = useState(endLat && endLng ? { lat: endLat, lng: endLng } : null);
|
||||
const startRef = useRef();
|
||||
const endRef = useRef();
|
||||
|
||||
const map = useMapEvents({
|
||||
move(e) {
|
||||
if (!isStartLocked && startRef.current) {
|
||||
startRef.current.setLatLng(e.target.getCenter());
|
||||
} else if (isStartLocked && !isEndLocked && endRef.current) {
|
||||
endRef.current.setLatLng(e.target.getCenter());
|
||||
}
|
||||
},
|
||||
zoom(e) {
|
||||
if (!isStartLocked && startRef.current) {
|
||||
startRef.current.setLatLng(e.target.getCenter());
|
||||
} else if (isStartLocked && !isEndLocked && endRef.current) {
|
||||
endRef.current.setLatLng(e.target.getCenter());
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (startLat && endLng) {
|
||||
map.fitBounds(
|
||||
[
|
||||
{ lat: startLat, lng: startLng },
|
||||
{ lat: endLat, lng: endLng },
|
||||
],
|
||||
{ paddingTopLeft: [16, 16], paddingBottomRight: [16, 130] }
|
||||
);
|
||||
}
|
||||
}, [startLat, map, endLng]);
|
||||
|
||||
const handleUnlockStart = () => {
|
||||
setIsStartLocked(false);
|
||||
setStartPosition(null);
|
||||
setValue("start_point", null);
|
||||
};
|
||||
|
||||
const handleUnlockEnd = () => {
|
||||
setIsEndLocked(false);
|
||||
setIsStartLocked(false);
|
||||
setEndPosition(null);
|
||||
setStartPosition(null);
|
||||
setValue("end_point", "");
|
||||
setValue("start_point", null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Marker
|
||||
position={startPosition || map.getCenter()}
|
||||
ref={startRef}
|
||||
icon={createCustomIcon([35, 35], StartIcon.src, "نقطه شروع")}
|
||||
eventHandlers={{
|
||||
click: () => {
|
||||
if (!isStartLocked) {
|
||||
const center = map.getCenter();
|
||||
setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
|
||||
setStartPosition({ lat: center.lat, lng: center.lng });
|
||||
setIsStartLocked(true);
|
||||
}
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{isStartLocked && !isEndLocked && (
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: 10,
|
||||
left: 10,
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<Button variant={"contained"} onClick={handleUnlockStart}>
|
||||
ویرایش نقطه شروع
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
{isStartLocked && (
|
||||
<Marker
|
||||
position={endPosition || map.getCenter()}
|
||||
ref={endRef}
|
||||
icon={createCustomIcon([35, 35], EndIcon.src, "نقطه پایان")}
|
||||
eventHandlers={{
|
||||
click: () => {
|
||||
if (!isEndLocked) {
|
||||
const center = map.getCenter();
|
||||
setValue("end_point", { lat: center.lat.toString(), lng: center.lng.toString() });
|
||||
setEndPosition({ lat: center.lat, lng: center.lng });
|
||||
setIsEndLocked(true);
|
||||
}
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isEndLocked && (
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: 10,
|
||||
left: 10,
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<Button variant={"contained"} onClick={handleUnlockEnd}>
|
||||
ویرایش نقاط
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const MapInfoTwoMarker = ({ setValue, errors, StartPoint = null, EndPoint = 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}
|
||||
endLat={EndPoint ? EndPoint.lat : null}
|
||||
endLng={EndPoint ? EndPoint.lng : null}
|
||||
/>
|
||||
</MapLayer>
|
||||
</Box>
|
||||
<Box display="flex" gap={2}>
|
||||
{errors.start_point && (
|
||||
<Typography color="error" variant="body2">
|
||||
{errors.start_point.message}
|
||||
</Typography>
|
||||
)}
|
||||
{errors.end_point && (
|
||||
<Typography color="error" variant="body2">
|
||||
{errors.end_point.message}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
export default MapInfoTwoMarker;
|
||||
Reference in New Issue
Block a user