work on source marker

src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/MapControlPolyline/index.jsx

@@ -6,13 +6,13 @@ import L from "leaflet";
 
 // ===== Icons =====
 const originIcon = new L.Icon({
-    iconUrl: "/icons/origin-marker.png",
+    iconUrl: "/icons/origin-icon.svg",
     iconSize: [32, 32],
     iconAnchor: [16, 32],
 });
 
 const destinationIcon = new L.Icon({
-    iconUrl: "/icons/destination-marker.png",
+    iconUrl: "/icons/destination-icon.svg",
     iconSize: [32, 32],
     iconAnchor: [16, 32],
 });
@@ -51,7 +51,7 @@ function FixedCenterMarker() {
                 pointerEvents: "none",
             }}
         >
-            <img src="/icons/pin-center.png" width={40} height={40} alt="center" />
+            <img src="/icons/origin-icon.svg" width={40} height={40} alt="center" />
         </div>
     );
 }

src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/index.jsx

@@ -0,0 +1,46 @@
+import { Marker, useMapEvents } from "react-leaflet";
+import L from "leaflet";
+import SourceIcon from "@/assets/images/source-icon.svg";
+import PrevSourceIcon from "@/assets/images/prev-source-icon.svg";
+import { useRef } from "react";
+
+
+const Routing = () => {
+  const mapPrevSourceMarker = useRef();
+  const defaultIconSize = [35, 35];
+  const createCustomIcon = (size, iconUrl) => {
+      return L.icon({
+          iconUrl: iconUrl,
+          iconSize: size,
+          iconAnchor: [size[0] / 2, size[1]],
+          popupAnchor: [0, -size[1]],
+      });
+  };
+
+  const map = useMapEvents({
+    move(e) {
+        mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
+    },
+    movestart() {
+        mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
+    },
+    moveend() {
+        mapPrevSourceMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevSourceIcon.src));
+    },
+  });
+
+  const handleMarkerClick = () => {
+      console.log(mapPrevSourceMarker.current.getLatLng().lat);
+  };
+
+  return (
+    <Marker
+        position={map.getCenter()}
+        ref={mapPrevSourceMarker}
+        eventHandlers={{ click: handleMarkerClick }}
+        icon={L.divIcon({ className: "" })}
+    />
+  )
+}
+
+export default Routing

src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/index.jsx

@@ -2,8 +2,7 @@ import MapLoading from "@/core/components/MapLayer/Loading";
 import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
 import dynamic from "next/dynamic";
 import { useCallback, useState } from "react";
-import MapControlPolyline from "./MapControlPolyline";
-import Example from "./MapControlPolyline";
+import Routing from "./Routing";
 const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
     loading: () => <MapLoading />,
     ssr: false,
@@ -23,7 +22,7 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
                 <Stack spacing={2}>
                     <Box sx={{ width: "100%", height: "400px" }}>
                         <MapLayer style={{ borderRadius: "4px" }}>
-                            <Example />
+                            <Routing />
                         </MapLayer>
                     </Box>
                 </Stack>

src/components/dashboard/roadMissions/operator/Actions/Create/Form/index.jsx

@@ -27,7 +27,7 @@ const reducer = (state, action) => {
 
 const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
     const [allData, dispatch] = useReducer(reducer, defaultValues);
-    const [tabState, setTabState] = useState(0);
+    const [tabState, setTabState] = useState(2);
     const handleClose = () => {
         setOpen(false);
     };