Feature/gasht cartables

src/core/components/MapInfoOneMarker.jsx

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