diff --git a/client/app/maps/page.tsx b/client/app/maps/page.tsx index a6217d3..9bb6837 100644 --- a/client/app/maps/page.tsx +++ b/client/app/maps/page.tsx @@ -3,6 +3,7 @@ import { AllStsMapShow } from '@/components/maps/AllStsShow'; import GoogleMapComponent from '@/components/maps/GoogleMap' import RouteMap from '@/components/maps/RouteMap'; import SetZone from '@/components/maps/SetZone'; +import GetVehicleCoordinateRoute from '@/components/maps/getVehicleCoordinate'; import { ChakraProvider, theme } from '@chakra-ui/react' type StsShow = { @@ -32,7 +33,9 @@ const Map = () => { {/* */} - + {/* */} + + ) diff --git a/client/components/maps/OptimizedVehicleRoute.tsx b/client/components/maps/OptimizedVehicleRoute.tsx index 5f71053..cc69544 100644 --- a/client/components/maps/OptimizedVehicleRoute.tsx +++ b/client/components/maps/OptimizedVehicleRoute.tsx @@ -26,7 +26,7 @@ import { } from "@react-google-maps/api"; import { ChevronDownIcon } from "@chakra-ui/icons"; -const center = { lat: 23.7244018, lng: 90.3887196 }; +const center = { lat: 23.77217046, lng: 90.39943882 }; type StsRouteType = { coordinate: string; @@ -45,9 +45,14 @@ type MapProps = { vehicleCoord: VehicleCoordinateType[]; }; +interface Coordinate { + lat: number; + lng: number; +} + const OptimizedVehicleRoute: React.FC = ({ coordinates, vehicleCoord }) => { const [routeType, setRouteType] = useState( - "Location Based Optimal Route" + "Vehicle Tracking Map" ); const [useDropdown, setUseDropdown] = useState(false); const [useLandDropdown, setUseLandDropdown] = useState(false); @@ -64,6 +69,9 @@ const OptimizedVehicleRoute: React.FC = ({ coordinates, vehicleCoord } name: "Amin Bazar", }); + const [vehicleAllCoord, setVehicleAllCoord] = useState([]); + const [vehicleObjectCoord, setVehicleObjectCoord] = useState([]); + const suggestionsList: string[] = [ "23.7751927, 90.3810282", "Dhanmondi STS", @@ -76,7 +84,11 @@ const OptimizedVehicleRoute: React.FC = ({ coordinates, vehicleCoord } useEffect(() => { const coordinateArray: string[] = coordinates.map((route) => route.name); + const VehicleCoordinateArray: string[] = vehicleCoord.map((route) => route.vehicleNumber); + const VehicleCoordinateObject: string[] = vehicleCoord.map((route) => route.coordinate); setAllCoordinates(coordinateArray); + setVehicleAllCoord(VehicleCoordinateArray); + setVehicleObjectCoord(VehicleCoordinateObject); }, [coordinates]); const landfillList: string[] = ["Amin Bazar"]; @@ -92,9 +104,9 @@ const OptimizedVehicleRoute: React.FC = ({ coordinates, vehicleCoord } const handleChangeRouteType = () => { setRouteType((prevType) => - prevType === "Location Based Optimal Route" + prevType === "STS to Landfill Optimal Route" ? "STS to Landfill Optimal Route" - : "Location Based Optimal Route" + : "STS to Landfill Optimal Route" ); handleChangeInputType(); handleLandChangeInputType(); @@ -125,7 +137,7 @@ const OptimizedVehicleRoute: React.FC = ({ coordinates, vehicleCoord } suggestion.toLowerCase().includes(searchTerm.toLowerCase()) ); - const landFilteredSuggestions = landfillList.filter((suggestion) => + const landFilteredSuggestions = vehicleAllCoord.filter((suggestion) => suggestion.toLowerCase().includes(landTerm.toLowerCase()) ); @@ -160,37 +172,27 @@ const OptimizedVehicleRoute: React.FC = ({ coordinates, vehicleCoord } return "no vehicle"; }; - async function calculateRoute() { - if (routeType === "Location Based Optimal Route") { - if ( - !originRef.current || - !destinationRef.current || - originRef.current.value === "" || - destinationRef.current.value === "" - ) { - return; - } + const getVehicleCoordByName = (stsName: string): string => { + const vehicle = vehicleCoord.find((sts) => sts.vehicleNumber === stsName); + if (vehicle) { + return vehicle.coordinate.toString(); + } - const directionsService = new google.maps.DirectionsService(); - const results = await directionsService.route({ - origin: originRef.current.value, - destination: destinationRef.current.value, - travelMode: google.maps.TravelMode.DRIVING, - }); + // If vehicle is not found, return undefined + return "no vehicle"; + }; - if (results && results.routes.length > 0) { - setDirectionsResponse(results); - setDistance(results.routes[0].legs[0].distance?.text || ""); - setDuration(results.routes[0].legs[0].duration?.text || ""); - } - } else { + async function calculateRoute() { + const stsCoord = getSTSCoodrdinateByName(searchTerm); + const vehicleCoord = getVehicleCoordByName(landTerm); + const newString = stsCoord.substring(0, 11); console.log(stsCoord); const directionsService = new google.maps.DirectionsService(); const results = await directionsService.route({ - origin: stsCoord, - destination: landFilCoord.coordinate, + origin: vehicleCoord, + destination: stsCoord, travelMode: google.maps.TravelMode.DRIVING, }); @@ -199,7 +201,7 @@ const OptimizedVehicleRoute: React.FC = ({ coordinates, vehicleCoord } setDistance(results.routes[0].legs[0].distance?.text || ""); setDuration(results.routes[0].legs[0].duration?.text || ""); } - } + } function clearRoute() { @@ -212,6 +214,26 @@ const OptimizedVehicleRoute: React.FC = ({ coordinates, vehicleCoord } if (destinationRef.current) destinationRef.current.value = ""; } +// const DummyCoordinates = [ +// { lat: 23.76287175, lng: 90.4306625 }, +// { lat: 23.79067691, lng: 90.3932404 }, +// { lat: 23.75847265, lng: 90.3819107 }, +// { lat: 23.79868747, lng: 90.3870606 }, +// { lat: 23.79083399, lng: 90.3762459 }, +// { lat: 23.79366130, lng: 90.4129814 }, +// { lat: 23.77952415, lng: 90.4260277 } +// ]; + +const ObjectCoordinates: Coordinate[] = vehicleObjectCoord.map(coordString => { + const [lat, lng] = coordString.split(',').map(parseFloat); + return { lat, lng }; +}); + const carIcon = { + url: 'https://banner2.cleanpng.com/20180331/tsw/kisspng-pickup-truck-car-dump-truck-clip-art-dump-truck-5abfc5a5931d73.2100081815225174136026.jpg', + scaledSize: new window.google.maps.Size(40, 40), // Adjust the size as per your icon + }; + console.log(ObjectCoordinates); + return ( = ({ coordinates, vehicleCoord } = ({ coordinates, vehicleCoord } }} onLoad={(map) => setMap(map as google.maps.Map)} > - + {map && ObjectCoordinates.map(coord => ( + + ))} {directionsResponse && ( )} @@ -249,18 +273,36 @@ const OptimizedVehicleRoute: React.FC = ({ coordinates, vehicleCoord } zIndex="1" >
- {routeType} - + Vehicle Live Tracking
+ + +
+ + {showLandSuggestion && ( +
    + {landFilteredSuggestions.map((suggestion, index) => ( +
  • handleLandSuggestionClick(suggestion)} + > + {suggestion} +
  • + ))} +
+ )} +
+ +
- {useDropdown ? ( +
= ({ coordinates, vehicleCoord } )}
- ) : ( - - - - )} -
- - {useLandDropdown ? ( -
- - {showLandSuggestion && ( -
    - {landFilteredSuggestions.map((suggestion, index) => ( -
  • handleLandSuggestionClick(suggestion)} - > - {suggestion} -
  • - ))} -
- )} -
- ) : ( - - - - )} +
+