Feature/gasht cartables
This commit is contained in:
AmirHossein Mahmoodi
@@ -12,24 +12,19 @@ const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const createCustomIcon = (size, iconUrl, labelText) => {
|
||||
const createCustomIcon = (size, iconUrl, labelText, color) => {
|
||||
if (labelText) {
|
||||
return L.divIcon({
|
||||
className: "custom-marker", // Apply your custom CSS class
|
||||
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 style="position: relative; text-align: center; width: 50px;">
|
||||
<div style="background-color: ${color}; color: white; border-radius: 20px; padding: 5px;">
|
||||
<span style="font-family: 'IRANSansFaNum', sans-serif;">${labelText}</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
iconSize: size,
|
||||
iconAnchor: [size[0] / 2, size[1]],
|
||||
popupAnchor: [0, -size[1]],
|
||||
<div style="width: 5px; height: 20px; background: ${color}; margin: auto;border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;"></div>
|
||||
</div>`,
|
||||
iconSize: [100, 50], // Adjust icon size to fit your content
|
||||
iconAnchor: [50, 25], // Adjust to position the marker correctly
|
||||
});
|
||||
}
|
||||
|
||||
@@ -45,6 +40,7 @@ const MAX_ZOOM_FOR_MARKER = 13;
|
||||
const MapInteraction = ({ setValue, startLat, startLng }) => {
|
||||
const [isMarkerLocked, setIsMarkerLocked] = useState(!!(startLat && startLng)); // وضعیت قفل مارکر
|
||||
const [enableSend, setEnableSend] = useState(false);
|
||||
const [startIconColor, setStartIconColor] = useState(startLat ? "#1CAC66" : "#003d4f"); // رنگ آیکن شروع
|
||||
const [markerPosition, setMarkerPosition] = useState(
|
||||
startLat && startLng ? { lat: startLat, lng: startLng } : null
|
||||
);
|
||||
@@ -79,6 +75,7 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
|
||||
setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
|
||||
setMarkerPosition({ lat: center.lat, lng: center.lng }); // بهروزرسانی موقعیت مارکر
|
||||
setIsMarkerLocked(true);
|
||||
setStartIconColor("#1CAC66");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -86,6 +83,7 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
|
||||
setValue("start_point", null); // حذف مقدار قبلی
|
||||
setIsMarkerLocked(false); // باز کردن قفل مارکر
|
||||
setMarkerPosition(null); // تنظیم مارکر به مرکز نقشه
|
||||
setStartIconColor("#003d4f");
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -93,7 +91,7 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
|
||||
<Marker
|
||||
position={markerPosition || map.getCenter()} // استفاده از موقعیت
|
||||
ref={markerRef}
|
||||
icon={createCustomIcon([35, 35], HereIcon.src, "اینجا")}
|
||||
icon={createCustomIcon([35, 35], HereIcon.src, "اینجا", startIconColor)}
|
||||
eventHandlers={{
|
||||
click: handleMarkerClick,
|
||||
}}
|
||||
|
||||
@@ -12,27 +12,21 @@ const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
|
||||
loading: () => <MapLoading />,
|
||||
ssr: false,
|
||||
});
|
||||
const createCustomIcon = (size, iconUrl, labelText) => {
|
||||
const createCustomIcon = (size, iconUrl, labelText, color) => {
|
||||
if (labelText) {
|
||||
return L.divIcon({
|
||||
className: "custom-marker", // Apply your custom CSS class
|
||||
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 style="position: relative; text-align: center; width: 50px;">
|
||||
<div style="background-color: ${color}; color: white; border-radius: 20px; padding: 5px;">
|
||||
<span style="font-family: 'IRANSansFaNum', sans-serif;">${labelText}</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
iconSize: size,
|
||||
iconAnchor: [size[0] / 2, size[1]],
|
||||
popupAnchor: [0, -size[1]],
|
||||
<div style="width: 5px; height: 20px; background: ${color}; margin: auto;border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;"></div>
|
||||
</div>`,
|
||||
iconSize: [100, 50], // Adjust icon size to fit your content
|
||||
iconAnchor: [50, 25], // Adjust to position the marker correctly
|
||||
});
|
||||
}
|
||||
|
||||
return L.icon({
|
||||
iconUrl: iconUrl,
|
||||
iconSize: size,
|
||||
@@ -48,6 +42,8 @@ const MapInteraction = ({ setValue, startLat, startLng, 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 [enableSend, setEnableSend] = useState(false);
|
||||
const [startIconColor, setStartIconColor] = useState(startLat ? "#1CAC66" : "#003d4f"); // رنگ آیکن شروع
|
||||
const [endIconColor, setEndIconColor] = useState(endLat ? "#D13131" : "#003d4f"); // رنگ آیکن پایان
|
||||
const startRef = useRef();
|
||||
const endRef = useRef();
|
||||
|
||||
@@ -86,6 +82,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
|
||||
setIsStartLocked(false);
|
||||
setStartPosition(null);
|
||||
setValue("start_point", null);
|
||||
setStartIconColor("#003d4f");
|
||||
};
|
||||
|
||||
const handleUnlockEnd = () => {
|
||||
@@ -95,6 +92,8 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
|
||||
setStartPosition(null);
|
||||
setValue("end_point", "");
|
||||
setValue("start_point", null);
|
||||
setStartIconColor("#003d4f");
|
||||
setEndIconColor("#003d4f");
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -102,7 +101,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
|
||||
<Marker
|
||||
position={startPosition || map.getCenter()}
|
||||
ref={startRef}
|
||||
icon={createCustomIcon([35, 35], StartIcon.src, "نقطه شروع")}
|
||||
icon={createCustomIcon([35, 35], StartIcon.src, "شروع", startIconColor)}
|
||||
eventHandlers={{
|
||||
click: () => {
|
||||
if (!enableSend) return;
|
||||
@@ -111,6 +110,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
|
||||
setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
|
||||
setStartPosition({ lat: center.lat, lng: center.lng });
|
||||
setIsStartLocked(true);
|
||||
setStartIconColor("#1CAC66");
|
||||
}
|
||||
},
|
||||
}}
|
||||
@@ -172,7 +172,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
|
||||
<Marker
|
||||
position={endPosition || map.getCenter()}
|
||||
ref={endRef}
|
||||
icon={createCustomIcon([35, 35], EndIcon.src, "نقطه پایان")}
|
||||
icon={createCustomIcon([35, 35], EndIcon.src, "پایان", endIconColor)}
|
||||
eventHandlers={{
|
||||
click: () => {
|
||||
if (!enableSend) return;
|
||||
@@ -181,6 +181,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
|
||||
setValue("end_point", { lat: center.lat.toString(), lng: center.lng.toString() });
|
||||
setEndPosition({ lat: center.lat, lng: center.lng });
|
||||
setIsEndLocked(true);
|
||||
setEndIconColor("#D13131");
|
||||
}
|
||||
},
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user