diff --git a/src/assets/images/destination-icon.svg b/src/assets/images/destination-icon.svg new file mode 100644 index 0000000..ad8a633 --- /dev/null +++ b/src/assets/images/destination-icon.svg @@ -0,0 +1,18 @@ + +
 + + + + + + + + + + + + + + + + diff --git a/src/assets/images/prev-destination-icon.svg b/src/assets/images/prev-destination-icon.svg new file mode 100644 index 0000000..656eca3 --- /dev/null +++ b/src/assets/images/prev-destination-icon.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/prev-source-icon.svg b/src/assets/images/prev-source-icon.svg new file mode 100644 index 0000000..621e71a --- /dev/null +++ b/src/assets/images/prev-source-icon.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/source-icon.svg b/src/assets/images/source-icon.svg new file mode 100644 index 0000000..295c9da --- /dev/null +++ b/src/assets/images/source-icon.svg @@ -0,0 +1,18 @@ + +
 + + + + + + + + + + + + + + + + diff --git a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/MapControlPolyline/index.jsx b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/MapControlPolyline/index.jsx index 7302f7d..3cf2a09 100644 --- a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/MapControlPolyline/index.jsx +++ b/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", }} > - center + center ); } diff --git a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/index.jsx b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/index.jsx new file mode 100644 index 0000000..f7e6f44 --- /dev/null +++ b/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 ( + + ) +} + +export default Routing \ No newline at end of file diff --git a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/index.jsx b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/index.jsx index dac1df2..f221fcc 100644 --- a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/index.jsx +++ b/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: () => , ssr: false, @@ -23,7 +22,7 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => { - + diff --git a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/index.jsx b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/index.jsx index 994ce63..dd39d68 100644 --- a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/index.jsx +++ b/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); };